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

Question

I have appended content (using ajax) to my document and my events are not firing. 我已将内容（使用ajax）附加到我的文档中，并且我的事件未触发。 I know this can be done using .live() but I read somewhere that it's deprecated now? 我知道这可以使用.live（）来完成，但我在某处读到它现在已被弃用了？

This is my code (it works fine on document ready, but not on the newly appended items): 这是我的代码（它可以在文档就绪时正常工作，但不能在新添加的项目上工作）：

$('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();
   }
  }); 
});

And the items: 和项目：

<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

try 尝试

$('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();
   }
  }); 
});

in this way you delegate the event handling to the ul which is present when the DOM is loaded and handles the events of elements added through AJAX. 通过这种方式，您可以将事件处理委托给加载DOM时存在的ul，并处理通过AJAX添加的元素的事件。 If the ul is not present when the dom is loaded you could delegate to the <body> tag 如果在加载dom时不存在ul，则可以委托<body>标记

EDIT - live() it's actually a wrapper around on() (before it was a wrapper around delegate() ) but delegates the event handling usually to the window which means that the event has to bubble up a lot. 编辑 - live（）它实际上是on()的包装（在它是delegate()的包装之前），但通常将事件处理委托给window ，这意味着事件必须冒出很多。 Taken from jQuery source 取自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(){ 
//... 
});

So, you append event to some parent element, which looks for siblings which exists on page-loading and which will be appended in future. 因此，您将事件追加到某个父元素，该元素查找页面加载时存在的兄弟元素，以及将来添加的元素。

使用.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