Question

我使用外部HTML文件中的ajax加载内容。不知道为什么在加载内容后，点击事件在任何新加载的元素（ul，li，图像等）上都没有在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

在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可以是a中视图的容器元素   例如，模型 - 视图 - 控制器设计，或者如果事件是文档   handler希望监视文档中的所有冒泡事件。该   文档元素在之前的文档头部中可用   加载任何其他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
});

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

3 个答案: