单击事件对 Ajax 加载的内容不起作用

Question

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

我无法理解这背后的确切问题。 请给我建议解决方案。 下面是代码供参考。

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

var currentBottle = this.title; var request = createRequest(); if (request == null) { alert("无法创建请求"); 返回; } request.onreadystatechange = showContent; request.open("GET", currentBottle + ".html", true); request.send(null);

function showContent() { if (request.readyState == 4) { if (request.status == 200) { document.getElementById("food_scroller").innerHTML = request.responseText; } } }

Answer 1

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

做这个

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

代替

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

Answer 2

在 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 3

我自己也经历过这个问题。 通过 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 标记中的元素之后放置脚本或在文档就绪处理程序中执行事件绑定。 或者，使用委托事件来附加事件处理程序。

委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。 例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是模型-视图-控制器设计中视图的容器元素。 在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪。

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