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 个答案: