Jquery插入dom后,插入部分无法调用js

竹林
  • 140

例如:
html:

<div class="a"><div>
<div class="b"><div>

在,js文件里有:

$(function(){
  $('.a').click(function(){
    alert('ok');
  })
  $('.b').click(function(){
    $("<div class='a'></div>").insertAfter($(this));
  })
})

那么新的dom结构就是

<div class="a"><div>
<div class="b"><div>
<div class="a"><div>

而后面那个a点击的时候就不会触发$('.a').click事件

问:怎么让后面加载的'.a'能够触发那个click事件

回复
阅读 10.4k
3 个回答

你应该使用 on 事件进行绑定。http://api.jquery.com/on/

$(function(){
  $("body").on("click", '.a', function(){
    alert('ok');
  });
  $('.b').click(function(){
    $("<div class='a'></div>").insertAfter($(this));
  });
})

因为你创建的新结构没有绑定事件,如果希望绑定的结构也有事件,你可以考虑把事件绑定到body,然后通过判断点击事件的节点是否有 calss=a,来加载相应的事件;

  $('body').click(function(e){
    var t = $(e.target);
    if(t.hasClass('a')){......}
  })

在 jQuery 1.9 中,live 已经被移除,请使用 on 来替代之

其实用live 就搞定了,live 利用事件冒泡到父节点,这样,即使新加入的元素也有事件响应,事件冒泡,好好研究一下吧 :http://api.jquery.com/live/

$('.a').live('click',function(){})
宣传栏