jQuery .on（）未绑定到所有将来的事件

Question

我试图弄清楚为什么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()
  })
})

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

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

Answer 1

你在做什么

您绑定一个事件，并在ajax调用中删除体内的所有元素，但是DOM中可能存在虚拟的'div'元素。

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

所以你要做的是

插入

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

和

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

做这个

$('body').empty();

和

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

这样可以确保删除体内的所有元素。

Answer 2

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

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

AJAX加载的内容是否获得“ document.ready”？