Javascript 事件委派与文档一起工作，但不与父级一起工作

我有下面的HTML代码，我目前正在尝试在单击照片时添加“selected”类，并在再次单击时删除该类

<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>

当我尝试使用gallery时，上面的jQuery代码不起作用，当我尝试使用container时也不起作用。但是，当我使用$document进行事件委派时，代码起作用

我似乎不明白为什么将事件处理程序绑定到父元素不起作用，但将其绑定到文档本身使其起作用

如果您能深入了解此事，我将不胜感激

---

编辑：在这里添加了JSFIDLE代码在FIDLE中工作，但在我的笔记本电脑上什么也不做，我似乎不明白为什么我把你的FIDLE分叉了，如图所示：

我做到了：

激发nextpage事件时，附加一张新照片。 在文档准备就绪时添加事件委派。 将授权人设置为库

---

您可以在“.photo”类上收听事件

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

---

添加更多相关代码添加jsfiddle@kenneth：您可以分享更改内容的代码吗。@Dave和@Milind Anantwar我添加了小提琴，代码在小提琴中工作，但在我的计算机上不工作……如果它在小提琴中工作，那么js代码就可以了。js中唯一可以停止委托工作的是替换委托绑定到的元素。检查您的其他HTML-您是否有不匹配的divor或其他内容？有时，这会使浏览器对其中的内容产生混淆，并使委托关系混乱。在单击“下一页”之前，切换代码是否有效？否，因为OP正在动态添加照片。因此.on优于.lcik，因为。单击仅查找绑定事件时存在的事件OK。所以您可以添加属性onclick=$this.toggleClass'selected'；你可以这样做。但是为什么呢？在添加新元素时，您可以在新元素上运行新的$.clickfunction{}，这比iinline onclick imo更好。但是，通常最好使用事件委派并将事件代码仅放在一个位置。如果$.get complete，您可以在回调中添加事件侦听器。使addEventPhoto=函数{//侦听器事件}；是的，你可以。我在我的评论中说，添加新元素时，可以对新元素运行一个新的$.clickfunction{}。但在这种情况下，委托通常更好，因为它允许您在文档就绪的一个地方设置所有事件。使代码更干净，更易于维护。

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

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