Javascript 为什么在.html（）之后没有触发单击事件？（jQuery） 请考虑这个代码： <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> $（函数（）{ $（'#clickme'）。单击（函数（）{ $（'note_pag'）.html（'ul>1'）； }); $（'#注意_paga'）。单击（函数（）{ 警报（$（this.attr（'href'））； 返回false； }); });

有人能告诉我为什么我可以点击

#node_app

中的链接，但是当我用

.html（）

替换div时，事件就不再被触发了吗？

因为你基本上使用的是

.bind

（通过

.click

）事件只为当前元素设置。然后删除这些元素。如果希望这些事件在更改dom后保持不变，请改用

.live

：

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

---

事件在单击后未设置为新的html

尝试：

尝试使用所需的

-

此外，插入新内容时应避免创建重复的id。您可以将

note\u page

更改为类而不是id。

而不是

$（'note\u pag a'）。单击
您将需要使用
$（'note\u pag a'）。live（“单击”，处理程序）
。
原因：事件已附加到a节点，当您覆盖HTML时，它将成为一个新的a节点
通过
click（）
或
bind（）
绑定到事件，仅适用于绑定事件处理程序时DOM中已存在的对象

您需要的是jQuery的函数，它允许您将处理程序绑定到尚未存在的元素

$('#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').live('click', function(){
    alert($(this).attr('href'));                  
    return false;
});

Edit:准确地说，
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.

$（'foo'）。单击（函数（）{alert（'foo'）}）；
$（'#bar'）。单击（函数（）{alert（'bar'）}）；
$（“#某些#触发器”）.append（“”）；
$（'foo'）.live（'click'，function（）{alert（'foo-live（）！'）}）；
$（'#bar'）.live（'click'，function（）{alert（'bar live（）！'）}）；
//->单击#foo警报“foo”和“foo live（）”
//->单击#bar只会提醒“bar live（）”，因为“.click（）”绑定在不存在的DOM元素上不起作用。

Edit2:

正如其他一些人所提到的（@Marnix，最值得注意的是），每次执行click处理程序时，您的“替换”代码都将具有相同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'）.html（'；

符合

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

$（'note#pag'）。替换为（'ul>
1
'）；

或

$（'note#pag'）.html（'；

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

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

请注意，这与相同，但在不同方面得到了显著的优化。
不会给您提供嵌套在彼此中的两个具有相同id的对象吗？
请注意，下面许多答案中提到的.live（）现在已被弃用。下面提到的lonesomeday使用.delegate（）非常有效。
 $('#note_pag').html('<ul><li><b>1</b></li><li><a href="2">2</a></li></ul>');

$('#note_pag a')

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

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