javascript - .click() 函数被忽略

Question

我正在生成无序列表中的列表项。然后我想听听对这些列表项中的任何一个的点击。我知道我还没有发布完整的代码，但我希望我没有必要这样做。我的 jQuery 单击函数是否完全忽略了像这样附加的元素？我已经尝试了几乎所有方法，但找不到原因!我只想看到我的“哈哈”警报! :(

  $.each(entries, function(i, v) {
    s += '<li';
    if (favouriteItem(v.title)) s += ' data-theme="e"';
    s += '><a href="#feedItemPage" class="contentLink" data-transition="slide" data-entryid="'+i+'">' + v.title + '</a></li>';
  });

  $("#linksList").append(s);
  $("#linksList").listview("refresh");

    $("li").click(function() {
      alert("lol");
      selectedEntry = $(this).data("entryid");
    });

虽然这些项目确实在视觉上出现了，但源代码仍然是这样的:

  <div data-role="content">
      <ul data-role="listview" id="linksList" data-divider-theme="b" data-inset="false"></ul>
  </div>

表明那里没有 li 元素。然而，它们确实在视觉上显示出来了吗？在我跳入熔岩池之前，请有人救救我。

Answer 1

改变:

$("li").click(function() {
  alert("lol");
  selectedEntry = $(this).data("entryid");
});

到

$('#linksList').on('click', 'li',function() {
  alert("lol");
  selectedEntry = $(this).data("entryid");
});

动态添加元素到文档时，需要使用.on()'s委托(delegate)事件语法。

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.