<ul>
<li>Hello..</li>
</ul>
$('input').click(function(){
$('ul').prepend($('<li>Another Hello...</li>').click()); // not working [1]
$('ul').prepend('<li>This is hello appending...</li>').children(':first').click(); // this is working [2]
});
$('ul li').live('click', function(){
console.log('New li clicked...');
});
为什么 [1] 代码片段有效?有没有其他方法可以解决这个相同的任务?我想在 prepend()
时触发点击事件。
N.B:这里可以使用 prependTo()
,但是否可以使用 prepend()
来完成同样的工作。
最佳答案
因为新元素,$('<li>Another Hello...</li>')
, 还不是 DOM 树(文档)的一部分,因此事件无法冒泡以触发与 .live()
绑定(bind)的事件处理程序.
.live()
将事件处理程序绑定(bind)到文档根目录并起作用,因为事件是 bubbling up the DOM tree .这意味着,首先调用事件起源元素的事件处理程序,然后调用其父元素的事件处理程序,依此类推,直到它到达文档根。
但是如果元素没有添加到文档中,它没有父节点,所以事件不能冒泡。
你可以使用 .prependTo()
[docs]相反:
$('<li>Another Hello...</li>').prependTo('ul').click();
关于javascript - 在前置时触发 li 上的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7736366/