javascript - 在前置时触发 li 上的点击事件

Question

<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() 来完成同样的工作。

Answer 1

因为新元素，$('<li>Another Hello...</li>') , 还不是 DOM 树(文档)的一部分，因此事件无法冒泡以触发与 .live() 绑定(bind)的事件处理程序.

.live()将事件处理程序绑定(bind)到文档根目录并起作用，因为事件是 bubbling up the DOM tree .这意味着，首先调用事件起源元素的事件处理程序，然后调用其父元素的事件处理程序，依此类推，直到它到达文档根。
但是如果元素没有添加到文档中，它没有父节点，所以事件不能冒泡。

你可以使用 .prependTo() ^[docs]相反:

$('<li>Another Hello...</li>').prependTo('ul').click();