Question

见screenshot。我列出了要上大学的东西。我有一个带有添加按钮的文本输入。当您在输入中键入内容并单击“添加”时，会添加该内容。但是，当我单击添加的项目的关闭按钮时，它不起作用。 alert('test')也没有出现，所以我猜新的关闭图标不会响应点击次数。我怎样才能让它发挥作用？这是我的代码：

的Javascript

  $("#packing_list_css .close").click(function() {
    $(this).closest('li').hide();
    alert('test');
  });
  $("#everyday_ul button").click(function() {
    new_item = $("#everyday_ul :text").val();
    new_item.trim();
    if (new_item.length != 0)
      $("<li><span class=\"close\">&times;</span>" + new_item + "</li>").insertBefore( "#everyday_ul :text" );
  });

HTML

<p>Everyday</p>
<ul id="everyday_ul">
  <% everyday.each do |item| %>
    <li><span class="close">&times;</span> <%= item %></li>
  <% end %>
  <input type="text"><button class="btn btn-link">Add</button>

Answer 1

因为你：

获取与文档中的#packing_list_css .close匹配的所有元素
将事件处理程序绑定到每个
添加与该选择器匹配的新元素

步骤1和2中不存在新元素，因此它永远不会绑定到它的事件处理程序。

将事件处理程序绑定到#packing_list_css，让click事件冒泡到它，然后检查实际点击的内容。

$("#packing_list_css").on("click", ".close", function() {

为什么不用JS插入HTML来响应点击？

1 个答案: