Question

我有以下HTML代码，我目前正在尝试添加＆＃39;已选择的＆＃39;单击照片时的类，以及再次单击时删除的类。

<div id="container">
      <h1>Photo Gallery</h1>

      <div id="gallery">
        <div class="photo">
          <img src="photos/skyemonroe.jpg">
          <div class="details">
            <div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
            <div class="date">12/24/2000</div>
            <div class="photographer">Alasdair Dougall</div>
          </div>
        </div>

       //Repetitions of the photo class.....

      </div>
      <a id="more-photos" href="pages/1.html">More Photos</a>
</div>

我目前正在使用以下jquery代码将事件处理程序绑定到照片的祖先，以便在单击更多照片按钮时将更多图片附加到页面时，jquery代码仍然可以使用这些新的添加了图片。

的jQuery

 $('#gallery').on('click','.photo',function(){
    $(this).toggleClass('selected');
  });

当我尝试使用#gallery时，不会上面的jQuery代码工作， NOR 当我尝试使用＃container时它是否有效。但是，当我使用时，代码可以工作使用$（document）进行事件委托。

我似乎无法弄清楚为什么将事件处理程序绑定到父元素不起作用，但将其绑定到文档本身会使其工作。

非常感谢对此事的任何见解

编辑：在这里添加了jsfiddle http://jsfiddle.net/744cX/（代码在小提琴中起作用，但在我的笔记本电脑上什么也没做，我似乎无法弄明白为什么）

Answer 1

我把你的小提琴分开了，可以在这里看到：

http://jsfiddle.net/6Qz8C/1/

$('#gallery').on('click','.photo',function(){
   $(this).toggleClass('selected');
});

我做了：

触发nextpage事件时，请附加一张新照片。
在文档准备就绪时添加事件委托。
将委托人设置为#gallery

Answer 2

你可以在＆＃39; .photo＆＃39;类

<div class="photo" onclick="$(this).toggleClass('selected');">

事件委托与文档一起使用但不与父母一起使用

2 个答案: