Question

我的JQuery代码是：

$(document).ready(function() {  
  $('#btnGenSpan').on('click', function(e) {
    $("#div_container").html($("#div_container").html()+
            "<span>Item-01 <a href='?delete=1' class='delete_item'>X</a></span><br />");
  });

  $('a.delete_item').on('click',function(e) {
    alert('delete clicked');
    return false;
  });
});

这是html内容：

<input type="button" id="btnGenSpan" value="Generate More Item" /><br /><br />
<div id="div_container">
  <span>Default Item-01 <a href='?delete=111' class='delete_item'>X</a></span><br />
  <span>Default Item-02 <a href='?delete=112' class='delete_item'>X</a></span><br />
</div>

这是JSFiddle here

对于静态项目（默认项目01和默认项目-02），X锚点工作正常并称为delete_item，但是对于那些由jquery生成的跨度（默认情况下生成的相同html类和锚点）未调用。任何帮助都非常感谢。

Answer 1

您可能希望尝试使用on的事件委派语法来使事件可用于动态创建的元素。作为原始事件的原因仅绑定到事件绑定时已存在于DOM中的a.delete_item，因此新添加的事件只是没有绑定到该事件。因此，只要您需要事件，就将事件绑定到DOM中存在的父容器，以便在事件发生时将其委托给选择器（jquery使用事件冒泡来使其工作）。

  $('#div_container').on('click','a.delete_item', function(e) {
      e.preventDefault();
      alert('delete clicked');
  });

<强> Demo

Answer 2

您必须为新DOM创建事件试试这个

$(document).ready(function() {  
  $('#btnGenSpan').on('click', function(e) {
    $("#div_container").html($("#div_container").html()+"<span>Item-01 <a href='?delete=1' class='delete_item'>X</a</span><br />");
      $('a.delete_item').on('click',function(e) {
        alert('delete clicked');
        return false;
      });
  });

  $('a.delete_item').on('click',function(e) {
    alert('delete clicked');
    return false;
  });
});

为什么我的jquery事件不需要动态生成的span

2 个答案: