Question

我有一个看似简单的问题，但我似乎无法找到解决方案。我基本上有一个触发点击事件的div。我的HTML是：

  <li class="infobox">
      <a href="#"><img class="thumb" src="img/2.jpg" alt="image02" /></a>
      <div class="over">
        <img src="img/search_icon.png" alt="read more" />
         <h6>New business</h6>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
       </div>
   </li>

我的jquery代码是：

$('#news_gallery li .over').click(function(event) {
   // I have animation code here
});

问题是：函数工作正常，除了click事件对img或div'.over'中的任何文本都不起作用。为什么子元素没有传递给click事件？我是否需要将特殊参数传递给函数？

Answer 1

我怀疑div内容是动态的。在设置事件后加载内容时，新插入的元素没有任何关联事件。快速解决方法是使用 “现场”而不是“点击”

$('#news_gallery li .over').live('click',function(event) {
   // I have animation code here
});

Answer 2

您可以尝试以下操作：

<li class="infobox">
      <a href="#"><img class="thumb" src="img/2.jpg" alt="image02" /></a>
      <div class="over">
        <img src="img/search_icon.png" alt="read more" />
         <h6>New business</h6>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
       </div
</li>

和js：

$('.infobox .over').click(function(e) {
  console.log(e);
});

JQuery点击事件不针对div子项

2 个答案: