Javascript 单击事件对Ajax加载的内容无效

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

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

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

var currentBattle=this.title； var request=createRequest（）； if（请求==null）{ 警报（“无法创建请求”）； 返回； } request.onreadystatechange=showContent； 打开（“GET”，currentball+“.html”，true）； 请求发送（空）

函数showContent（）{ if（request.readyState==4）{ 如果（request.status==200）{ document.getElementById（“食品滚动条”）.innerHTML=request.responseText； } }

---

}

在Safari中，内容类型有时很重要，请确保将响应类型设置为

text/html

。此外，在AJAX加载的内容中，您应该尽量不要使用

标记，我认为Safari有时并不尊重这些标记

可能尝试使用jQuery的

$.load（）

使HTML内容跨浏览器兼容（下面相当于createRequest和showContent函数）：

---

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

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

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

$ajaxresult='Book'；

您需要添加

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

$ajaxresult.='$（“#bookbtn”）。在（“单击”，function（）{doit（$（this））}）；”上。“\n”；

然而，在研究这个问题时，我在

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

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序。这 元素可以是视图中的容器元素 例如，模型视图控制器设计，或记录事件 处理程序希望监视文档中的所有冒泡事件。这个 文档元素在之前的文档头中可用 加载任何其他HTML，因此可以安全地在那里附加事件，而无需 正在等待文档准备就绪

除了处理后代元素上的事件的能力之外 尚未创建，委派事件的另一个优点是 当必须使用多个元素时，可能会产生更低的开销 监控。在tbody中包含1000行的数据表上，以下示例 将处理程序附加到1000个元素：

---

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

这样做

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

而不是

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

---

+1您加载的内容不应包含

。使用

$.live（）

将这些事件侦听器放到原始页面。谢谢你，我不是很自信，但相当确定。我会记住

标签。

$.live（）

是一个更好的答案。感谢您提供的建议，但是我不包括任何加载内容的脚本。在移动safari中，jquery evernts的工作速度非常慢，我无法使用它们。我不包括任何加载内容的脚本。我只是从外部页面加载无序列表。让每件事都更清楚。我在点击事件中调用上述代码。实际上，根据功能，我在顶部和底部有图像缩略图，这是另一组图像（一个长行可滚动），当用户点击上面的缩略图图像时，新的图像集应该出现在底部，取代以前的图像。到这里为止，一切都很好，但是单击事件在这些新加载的图像上不起作用。除了现场活动，还有其他选择吗？这是重复的吗？谢谢这很有帮助

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