jquery - 对 jquery 监听器的工作方式感到困惑

Question

我有一些代码可以动态添加到 DOM 的链接并向每个链接添加监听器。我遇到的问题是，每次我单击其中一个链接时，所有处理程序都会触发。我尝试修复此问题，结果总是这样，否则我根本得不到任何响应(就好像从未分配监听器一样)。

所以我只是通过做一些我认为不起作用的事情来解决这个问题。我将监听器分配给动态添加的元素的 id(而不是将其分配给 DOM 中已有的父元素)。我认为这是不可能的，因为监听器必须位于 DOM 中已有的元素上？

更令人困惑的是，我在 jsfiddle 中使用了一些非常相似的代码，其结果与我得到的结果几乎相反。当我遇到问题时，它工作得很好，当我解决我的问题时，该解决方案在 jsfiddle 中不起作用!

这是我的工作代码。再多一点背景知识 - 我正在使用 Firebase，每次数据库中发生 child_added 事件时都会添加这些 li 元素(或者当用户登录时，列表将填充数据库中已有的所有条目)。

var songName = songSnapshot.name();
$(listSelector).append("<li id='" + songName + "'><a href='#'>" + songName + "</a></li>");
$("#" + songName).on("click", function(event) {
  event.preventDefault();
  var clickedSong = $(this).text();
  loadCheck(clickedSong);
});

这是 HTML:

  <ul class="six columns" id="dropdowns">
    <li><a href="#" id="createsong">Create New Song</a></li>
    <li>
      <a href="#">Your Songs</a>
      <div class="dropdown">
        <ul id="userSonglist">

        </ul>
      </div>
    </li>
    <li>
      <a href="#">All Songs</a>
      <div class="dropdown">
        <ul id="publicSonglist">

        </ul>
      </div>
    </li>
  </ul>

你知道发生了什么吗？为什么这有效？我对jquery监听器的理解不正确吗？我在这里、jquery.com 和其他网站上花了几乎一整天的时间研究这个问题，但这仍然让我感到困惑。我实际上只是在 jsfiddle 中尝试了这段代码，并且它有效。很明显我遗漏/误解了一些东西。

Answer 1

我会做这样的事情......

// P.s. this if/else statement are doing the exact same thing?!
var songName = songSnapshot.name();
if (listSelector === "#publicSonglist") {
  $(listSelector).append("<li id='" + songName + "' class='songItem'><a href='#'>" + songName + "</a></li>");
}
else {
  $(listSelector).append("<li id='" + songName + "' class='songItem'><a href='#'>" + songName + "</a></li>");
};

然后，在您的点击/添加事件之外:

$('#dropdowns').on("click", '.songItem', function(event) {
  event.preventDefault();
  var clickedSong = $(this).text();
  loadCheck(clickedSong);
});