Click 事件不适用于 Ajax 加载的内容

Question

我正在使用 ajax 从外部 HTML 文件加载内容。不知道为什么在加载内容后，单击事件在任何新加载的元素（ul、li、图像等）上的 safari（移动 safari 也是如此）中不起作用。但是，这在 Mozilla 中有效。

我无法理解这背后的确切问题。请告诉我解决方案。以下是供参考的代码。

注意：我在 jquery 就绪函数下使用下面的代码。 jquery是问题的原因吗？？

var currentBottle = this.title; var request = createRequest(); 如果（请求==空）{ alert("无法创建请求"); 返回; } request.onreadystatechange = 显示内容； request.open("GET", currentBottle + ".html", true); request.send(null);

函数显示内容（）{ 如果（request.readyState == 4）{ 如果（request.status == 200）{ document.getElementById("food_scroller").innerHTML = request.responseText; } } }

Answer 1

在 Safari 中，内容类型有时很重要，请确保将响应类型设置为 text/html。此外，在您加载的 AJAX 内容中，您应该尽量不要有 <script> 标签，我认为 Safari 有时不会尊重这些标签。

也许可以尝试使用jQuery的$.load()来获取跨浏览器兼容的HTML内容（下面相当于你的createRequest和showContent函数）：

var currentBottle = this.title;
$.load(currentBottle + ".html",
    function(responseText,textStatus,XMLHttpRequest){
        $("#food_scroller").html(responseText);
        //bind you on click events here
        $("#food_scroller").find("ul, li, images").click(myClickFunction);
  }
);

Answer 2

我自己也经历过这个问题。通过 Ajax 新加载的 html 需要连接到事件处理程序，即使它正在替换现有的 DOM 元素。为此，您必须在 AJAX 结果中包含所有正在呈现的事件敏感元素的处理程序。

例如，如果您的 AJAX 调用返回

$ajaxresult = '<button class="bookbtn" id="bookbtn" type="button" >Book</button>';

你需要添加

$ajaxresult .= '<script>$("#bookbtn").on("click",function(){doit($(this))});</script>'."\n";

但是在刚刚研究这个问题时，我在http://api.jquery.com/on/中看到了以下内容：

事件处理程序仅绑定到当前选定的元素；他们 在您的代码调用 .on() 时必须存在。确保 元素存在并且可以选择，将脚本放置在 HTML 标记中的元素或在文档中执行事件绑定 准备好处理程序。或者，使用委托事件附加事件 处理程序。

委托事件的优势在于它们可以处理来自 以后添加到文档中的后代元素。经过 选择一个保证在该时间存在的元素 附加了委托事件处理程序，您可以使用委托事件 避免频繁附加和删除事件处理程序的需要。这 element 可以是视图中的容器元素 例如，模型-视图-控制器设计，或记录事件 处理程序想要监视文档中的所有冒泡事件。这 文档元素在文档头部之前可用 加载任何其他 HTML，因此在此处附加事件是安全的 等待文档准备好。

除了处理后代元素事件的能力 尚未创建，委托事件的另一个优点是它们 当必须使用许多元素时，开销可能会低得多 被监控。在其 tbody 中有 1,000 行的数据表上，此示例 将处理程序附加到 1,000 个元素：...

Answer 3

当通过 ajax 加载页面的内容时，事件绑定会中断。您必须使用以下过程在文档中再次绑定事件。

这样做

$(document).on('click', '.classname' ,function (e) {
    // write your logic
});

而不是

$('.classname').on('click' ,function (e) {
    // write your logic
});