为什么在.html（）之后没有触发click事件？ （jQuery的）

Question

请考虑以下代码：

<script>
$(function(){
   $('#clickme').click(function(){   
      $('#note_pag').html('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');
   }); 

   $('#note_pag a').click(function(){           
     alert($(this).attr('href'));                  
    return false;
   });
});
</script>


<a href="#" id="clickme">CLICK ME</a>

<div id="note_pag">
  <ul>
    <li><a href="1">1</a></li>
    <li><a href="2">2</a></li>
    <li><a href="3">3</a></li>
    <li><a href="4">4</a></li>
  </ul>
</div>

有人可以告诉我为什么我可以点击#node_app内的链接，但是当我用.html()替换div时，事件不再被触发了吗？

Answer 1

因为您基本上使用.bind（通过.click），所以事件仅针对当前元素设置。然后，您将删除这些元素。如果您希望在更改dom后这些事件仍然存在，请改为使用.live：

$("#note_page a").live("click", function() {
    alert($(this).attr("href"));
    return false;
});

Answer 2

您需要live -

$('#note_pag a').live('click',function(){           
    alert($(this).attr('href'));                  
    return false;
});

另外，您应该避免在插入新内容时创建重复ID。您可以将note_page更改为类而不是ID。

Answer 3

通过click()或bind()绑定到事件仅适用于绑定事件处理程序时DOM中已存在的对象。

您正在寻找的是jQuery的live()函数，它允许您将处理程序绑定到尚未存在的元素。

您的代码如下所示：

$('#note_pag a').live('click', function(){
    alert($(this).attr('href'));                  
    return false;
});

编辑：确切地说，live()绑定到$(document)并检查通过DOM一直冒泡的事件的目标属性 - 这就是绑定的原因即使绑定事件回调后添加了元素，也能正常工作。

示例HTML：

<div id="some_triggers">
    <a id="foo" href="#">Foo!</a>
</div>

示例jQuery：

$('#foo').click(function(){ alert('foo') });
$('#bar').click(function(){ alert('bar') });
$('#some_triggers').append('<a id="bar" href="#">Bar!</a>');
$('#foo').live('click', function(){ alert('foo live()!') });
$('#bar').live('click', function(){ alert('bar live()!') });

// -> clicking #foo alerts "foo" and "foo live()"
// -> clicking #bar alerts "bar live()" only, since the '.click()' binding doesn't work on non-existent DOM elements.

<强> EDIT2：

正如其他一些人所提到的那样（@Marnix，最值得注意的是），每次点击处理程序执行时，您的“替换”代码都会在彼此内嵌相同ID的元素。

您应该替换

 $('#note_pag').html('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');

与

对齐

$('#note_pag').replaceWith('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');

或

 $('#note_pag').html('<ul><li><b>1</b></li><li><a href="2">2</a></li></ul>');

Answer 4

$('#note_pag a')

这表示“查找a中的所有#note_pag元素”。然后，将事件处理程序绑定到那些元素。

$('#note_pag').html('<div id="note_pag"><ul><li><b>1</b></li><li><a href="2">2</a></li></ul></div>');

执行此操作时，将替换事件处理程序绑定到上面的元素。 （实际上，你每次都要添加<div id="note_pag">：你不需要包含你正在填充的元素的html。）

实际上，您需要将事件处理程序绑定到另一个始终存在的元素。这是可能的，因为祖先元素会被通知后代元素上的事件。使用jQuery执行此操作的最佳方法是delegate方法：

$('#note_pag').delegate('a', 'click', function() {
    alert($(this).attr('href'));                  
    return false;
});

请注意，这与live的功能相同，但以各种方式进行了更好的优化。

Answer 5

单击

后，

事件未设置为新的html

尝试：

$('#note_pag a').live('click', function(){  

Answer 6

尝试使用.live()

Answer 7

而不是$('#note_pag a').click，您需要使用$('#note_pag a').live("click",handler)。 原因：事件已附加到节点，当您覆盖HTML时，它将成为新的节点