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

时间:2010-11-27 18:29:26

标签: javascript jquery ajax safari mobile-safari

我使用外部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;     }   } }

3 个答案:

答案 0 :(得分: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);
  }
);

答案 1 :(得分:0)

我自己经历过这个问题。通过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个元素:...

答案 2 :(得分:0)

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

执行此操作

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

代替

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