jQuery .on() 未绑定到所有未来事件答案

【问题标题】：jQuery .on() not binding to all future eventsjQuery .on() 未绑定到所有未来事件
【发布时间】：2018-02-26 11:56:41
【问题描述】：

我试图弄清楚为什么 jQuery 没有绑定到我页面上所有未来的“点击”事件。它只在我第一次这样做时才有效。 AJAX 请求触发，并显示将正确的数据添加到 DOM，但是任何后续尝试都不会触发。当我选择“查看所有经销商”按钮时，AJAX 请求会返回经销商的 JSON 数组并将它们显示在页面上。

$(function(){
  $("body").on("click", "#all-dealerships", function(e){
    let path = $(this).attr("href");

    $.ajax({
      url: path,
      dataType: 'json',
      success: function(response){
        var source = $("#dealerships-template").html()
        var template = Handlebars.compile(source)
        var result = template(response)
        var a = () => document.getElementsByTagName("body")[0].innerHTML = ""
        a()
        document.getElementsByTagName("body")[0].innerHTML += result
        }
    })
    e.preventDefault()
  })
})

变量名称和结构仅用于测试。 Body 是一个不会改变的静态元素。我尝试将按钮包装在一个 div 中并将其用作绑定事件的父对象，但是我得到了相同的结果。页面加载只是不使用 AJAX。该事件仅在我进行整页刷新时才被绑定。导航到网站上的其他页面并不能解决问题。

将新元素添加到 DOM 时，触发 AJAX 请求的按钮不存在。它被删除。导航回该按钮的操作不会重新触发点击事件。

【问题讨论】：

你为什么要这样替换整个内容？只需替换实际需要替换的页面位。然后你就不用担心重新绑定按钮了。但从理论上讲，这段代码应该真的可以正常工作，除非您请求中返回的按钮与原始按钮的 ID 不同，或者其他什么。不看 HTML 就很难知道。
尽管您可以将 var a = () => document.getElementsByTagName("body")[0].innerHTML = "" a() document.getElementsByTagName("body")[0].innerHTML += result 简化为 document.getElementsByTagName("body")[0].innerHTML = result 。不确定额外的东西是做什么用的？
我删除了多余的东西，您的建议仅适用于初始请求。后续的不能通过 ajax 工作。
即使我只是将结果 html 附加到现有页面而不清除它，我也无法重复后续的 ajax 请求。在 HTML 成功附加到现有页面后，当我导航到其他链接并返回时，单击该按钮不会触发另一个 ajax 请求。

标签： javascript jquery

【解决方案1】：

你在做什么

您正在绑定一个事件，并且在 ajax 调用中您正在删除正文中的所有元素，但是 DOM 中可能存在虚拟的“div”元素。

因此，您在 id 上绑定了一个事件（仅在一个元素上绑定事件）您的点击不会被触发

所以你要做的是，

插入

document.getElementsByTagName("body")[0].innerHTML = ""

与

 document.getElementsByTagName("body")[0].innerHTML += result

这样做

$('body').empty();

与

$("body").html(result);

这将确保正文中的所有元素都将被删除。

【讨论】：

"虚拟 'div' 元素可能存在于 DOM 中。"你到底是什么意思？
我添加了主要元素，所有视图都被渲染。我将 .on() 事件绑定代码保持不变，并将主体空调用替换为 $('main').empty() 和 $('main').html(results)。这像以前一样工作，初始请求通过 AJAX 成功通过，后续请求则没有。谢谢我会继续努力！

【解决方案2】：

最终解决我的问题是将事件绑定更改为 $(document).on(...) 而不是 $('body').on(...)

当新的 HTML 内容附加到 DOM 时，触发 AJAX 请求的按钮不再可用。导航回按钮所在的页面不会触发绑定到 body 元素的事件。以文档为目标可确保事件每次都会重新触发。

Does AJAX loaded content get a "document.ready"?

【讨论】：