ajax调用替换页面内容后单击功能不起作用[重复]答案

【问题标题】：click function not working after ajax call replaces contents of the page [duplicate]ajax调用替换页面内容后单击功能不起作用[重复]
【发布时间】：2014-08-29 02:48:49
【问题描述】：

我正在尝试创建一个消息小部件，当用户单击其 div 时会打开一条消息，并且每 30 秒刷新一次。

问题是小部件刷新后，点击功能停止工作。我猜这与设置点击时添加的新元素不存在有关。我用 firebug 对其进行了测试，如果我在重新加载后运行脚本，它会一直工作到下一次刷新。

有谁知道在 ajax 调用后重置类似内容的正确方法是什么？

我在下面包含我的咖啡脚本代码：

refreshPartial = ->
  $.ajax url: "refresh-messages-feed"

$(document).ready ->
  myElem = document.getElementById("messagesFeed")
  setInterval refreshPartial, 30000  if myElem?
  $(".conversation").click ->
    url = "/conversations/small/" + $(this).attr("id")
    console.log url
    $.ajax
      url: url
      cache: false
      success: (html) ->
        $("#conversation").html html

【问题讨论】：

很抱歉，在发布我的问题之前我找不到这个答案。

标签： javascript jquery ajax coffeescript

【解决方案1】：

改用委托事件处理程序：

$(document).on('click', ".conversation", function(){
     // Your handler code
});

它的工作原理是在一个不变的祖先元素上监听事件，然后将 jQuery 过滤器应用于生成事件的任何元素，然后将函数应用于匹配并生成事件的任何元素。

注意：为了提高效率，请使用最近的不变祖先，或使用document 作为后备。不要使用“body”，因为它有一些错误

【讨论】：

尝试了很多其他的技巧，但这只对我有用。