使用ajax覆盖内容时,jquery click事件不起作用

Question

我在这段代码下面解释了这个问题

<div id='content'>

<div id='help'>
blah blah blah
once there lived a king named midas
blah blah blah
</div>

<script>
$(document).ready(function() {
    $('#help').click( function () {
          $('help').hide(500);
     })
})
</script>

<!-- bottom of the page after a long other content -->
</div>
<!-- end of div id= content -->

<script>
function ondelete()
{
// doing an ajax request to after deleting some items to dynamically update a list.
// the result will also have the same above div code with that help div
   document.getElementById('content').innerHTML = xmlHTTP.responseText
}
</script>

div中有一个内容部分,其内容为'content'作为其内部,我有一个帮助div.哪个是display:none bydefault,如果用户点击了帮助按钮,我就做了

$('#help').show(500);

当用户点击相同的帮助按钮或用户点击帮助div时,我执行此代码隐藏div $('#help').hide(500)

这很好用,直到我做一个ajax请求来更新div id ='content'的内容我覆盖了相同内容的相同帮助div.这就像我覆盖了除页眉和页脚之外的整个内容区域.

但在使用响应文本更新后,在document.ready中的代码顶部的click事件无法正常工作,因为onclick正在处理该div

我的意思是运作良好.如果没有单击并使用上面的文档就绪代码,则从ajax覆盖时它不起作用.

根据我的经验,当使用ajax动态获取和更新带有脚本src标记和脚本标记的代码时,javascript代码或链接无效.

现在我使用onclick而不是那个文件准备隐藏并显示帮助div.

最重要的是

when there is a overwrite from ajax if you again set
$(#'help').click = .... code
this works.

like 
function ondelete()
{
   document.getElementById('content').innerHTML = xmlHTTP.responseText
   $('#help').click (function() { $('#help').hide(500); });
}

因此,当您使用ajax更新它时,似乎必须更新所有附加事件.

请提出您的意见和建议以克服这个问题.

Answer 1

尝试使用.live().

$(document).ready(function() {
    $('#help').live('click', function () {
          $(this).hide(500);
     });
});

.live(eventType,handler)

从版本1.9开始,.live()已被弃用.

然后你可以使用http://api.jquery.com/delegate/

现在或将来,为当前选择器匹配的所有元素附加处理程序.