Jquery 单击内部div上未触发的事件
如果我在#thumbhider和#thumbcontent div之外使用.thumbnail div,那么单击事件可以正常工作,正如预期的那样。目前没有 网址: 我猜这与溢出有关:隐藏在包含的div上?我怎样才能解决这个问题 javascript:Jquery 单击内部div上未触发的事件,jquery,html,css,Jquery,Html,Css,如果我在#thumbhider和#thumbcontent div之外使用.thumbnail div,那么单击事件可以正常工作,正如预期的那样。目前没有 网址: 我猜这与溢出有关:隐藏在包含的div上?我怎样才能解决这个问题 javascript: //this is within $(document).ready function $(".thumbnail").click(function () { var IMAGE_DIR = "images/guitars/";
//this is within $(document).ready function
$(".thumbnail").click(function () {
var IMAGE_DIR = "images/guitars/";
var img = $(this).find("img").attr("alt");
$("#mainphoto").attr("src", IMAGE_DIR + img);
if(captions) {
$("#imgcaption").text(captions[img]);
}
});
div.thumbnail { background-color: #000000; padding: 1px; float: left; width: 69px; height: 69px; cursor: pointer; }
div#thumbhider { width: 673px; height: 70px; overflow: hidden; margin: 0 auto; margin-top: 19px; position: relative; }
div.thumbcontent { height: 70px; background-color: #00ff00; width: 0 auto; display: inline; position: relative; }
<div id="thumbhider">
<div class="thumbcontent">
<div style="margin-right:15px;" class="thumbnail"><img alt="1.png" src="thumber.php?img=images/guitars/1.png&h=69&w=69"></div>
<div style="margin-right:15px;" class="thumbnail"><img alt="10.png" src="thumber.php?img=images/guitars/10.png&h=69&w=69"></div>
<!--etc....-->
<div style="clear:both;"></div>
</div>
</div>
css:
//this is within $(document).ready function
$(".thumbnail").click(function () {
var IMAGE_DIR = "images/guitars/";
var img = $(this).find("img").attr("alt");
$("#mainphoto").attr("src", IMAGE_DIR + img);
if(captions) {
$("#imgcaption").text(captions[img]);
}
});
div.thumbnail { background-color: #000000; padding: 1px; float: left; width: 69px; height: 69px; cursor: pointer; }
div#thumbhider { width: 673px; height: 70px; overflow: hidden; margin: 0 auto; margin-top: 19px; position: relative; }
div.thumbcontent { height: 70px; background-color: #00ff00; width: 0 auto; display: inline; position: relative; }
<div id="thumbhider">
<div class="thumbcontent">
<div style="margin-right:15px;" class="thumbnail"><img alt="1.png" src="thumber.php?img=images/guitars/1.png&h=69&w=69"></div>
<div style="margin-right:15px;" class="thumbnail"><img alt="10.png" src="thumber.php?img=images/guitars/10.png&h=69&w=69"></div>
<!--etc....-->
<div style="clear:both;"></div>
</div>
</div>
html:
//this is within $(document).ready function
$(".thumbnail").click(function () {
var IMAGE_DIR = "images/guitars/";
var img = $(this).find("img").attr("alt");
$("#mainphoto").attr("src", IMAGE_DIR + img);
if(captions) {
$("#imgcaption").text(captions[img]);
}
});
div.thumbnail { background-color: #000000; padding: 1px; float: left; width: 69px; height: 69px; cursor: pointer; }
div#thumbhider { width: 673px; height: 70px; overflow: hidden; margin: 0 auto; margin-top: 19px; position: relative; }
div.thumbcontent { height: 70px; background-color: #00ff00; width: 0 auto; display: inline; position: relative; }
<div id="thumbhider">
<div class="thumbcontent">
<div style="margin-right:15px;" class="thumbnail"><img alt="1.png" src="thumber.php?img=images/guitars/1.png&h=69&w=69"></div>
<div style="margin-right:15px;" class="thumbnail"><img alt="10.png" src="thumber.php?img=images/guitars/10.png&h=69&w=69"></div>
<!--etc....-->
<div style="clear:both;"></div>
</div>
</div>
从
div.thumbcontent
div.thumbcontent {
height: 70px;
background-color: lime;
width: 0 auto;
display: inline;
/*position:relative*/
}
顺便说一句,你的网站是一个混乱的定位元素。很难调试…我这样做是为了帮你的忙。前端网络开发不是我真正喜欢的东西!神奇的非常感谢,不客气。这个错误很明显,很容易纠正。您已将
光标:指针设置为.thumbnail
元素,但鼠标上方没有任何动作。因此,这不可能是js单击事件或溢出问题。