使用.on的附加内容的jQuery事件？

Question

我已将内容（使用ajax）附加到我的文档中，并且我的事件未触发。 我知道这可以使用.live（）来完成，但我在某处读到它现在已被弃用了？

这是我的代码（它可以在文档就绪时正常工作，但不能在新添加的项目上工作）：

$('li[id^="inv-"] a.close').on('click', function(){
 var item=($(this).closest("li[id^='inv-']")).attr('id');
 var id = parseInt(item.replace("inv-", ""));
 $.ajax({
   type: "POST",
   url: "ajax-invi.php",
   dataType: "html",
   data: "id="+idboda+"&idinv="+id+"&borrar=ok",
   success: function(data) {
     noty({"text":"El invitado ha sido borrado"});
     $("body").find('li#inv-' + id).remove();
   }
  }); 
});

和项目：

<ul>
  <li id="inv-39">
   <div class="row_field">
     <label>Adri</label>
     <a class="close" href="#invlist">Borrar</a>
   </div>                  
  </li>
  <li id="inv-40">
   <div class="row_field">
     <label>Marga</label>
     <a class="close" href="#invlist">Borrar</a>
   </div>  
  </li>
</ul>

Answer 1

尝试

$('ul').on('click','a.close', function(){
 var item=($(this).closest("li[id^='inv-']")).attr('id');
 var id = parseInt(item.replace("inv-", ""));
 $.ajax({
   type: "POST",
   url: "ajax-invi.php",
   dataType: "html",
   data: "id="+idboda+"&idinv="+id+"&borrar=ok",
   success: function(data) {
     noty({"text":"El invitado ha sido borrado"});
     $("body").find('li#inv-' + id).remove();
   }
  }); 
});

通过这种方式，您可以将事件处理委托给加载DOM时存在的ul，并处理通过AJAX添加的元素的事件。 如果在加载dom时不存在ul，则可以委托<body>标记

编辑 - live（）它实际上是on()的包装（在它是delegate()的包装之前），但通常将事件处理委托给window ，这意味着事件必须冒出很多。 取自jQuery源码

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

Answer 2

$(document).on('click', 'li[id^="inv-"] a.close', function(){ 
//... 
});

因此，您将事件追加到某个父元素，该元素查找页面加载时存在的兄弟元素，以及将来添加的元素。

使用.on的附加内容的jQuery事件？

问题描述

2 个解决方案

解决方案1
3 已采纳 2012-03-26 08:44:22

解决方案2
1 2012-03-26 08:47:52

使用.on的附加内容的jQuery事件？

问题描述

2 个解决方案

解决方案1 3 已采纳 2012-03-26 08:44:22

解决方案2 1 2012-03-26 08:47:52

解决方案1
3 已采纳 2012-03-26 08:44:22

解决方案2
1 2012-03-26 08:47:52