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()绑定的事件处理程序。

.live()将事件处理程序绑定到文档根目录并且因为事件为bubbling up the DOM tree而起作用。这意味着，首先调用发起事件的元素的事件处理程序，然后为每个祖先调用其父元素的事件处理程序，直到它到达文档根目录。
但是如果元素未添加到文档中，则它没有父节点，因此事件不会冒泡。

您可以改为使用.prependTo() ^[docs]：

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

在前置时点击li上的点击事件

1 个答案: