Question

我目前在一个网站上工作： http://dlt.tribehosting.com/solution

现在，当我点击商业或住宅按钮时，它工作正常，但当你进入服务页面时，jQuery中的“切换”将无法正常工作 - 实际上所有jQuery脚本都停止工作（主页上的滑块相同）。

如果页面实际上已重新加载，那么在用户转到另一个链接并且一切都中断之前，所有页面都是好的。这与（document）.ready函数有关，因为我正在使用它（你可以在标题中看到）。

在通过导航链接访问时，如何防止此冲突或强制jQuery切换到所有页面上的任何想法？

由于

Answer 1

您的问题是您正在使用document.ready来运行通过AJAX引入DOM的页面的代码。这意味着，如果要绑定到添加到DOM的每个页面的事件，则应使用pageinit或pagecreate。

变化：

$(function(){
    var sidebar = $('.hor-nav');
    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

要：

//run this code when a pseudo-page is added to the DOM
$(document).delegate('[data-role="page"]', 'pageinit', function(){

    //only get the .hor-nav elements in this pseudo-page
    var $sidebar = $(this).find('.hor-nav');

    //no need to delegate here since the elements for this page exist in the DOM now
    $sidebar.find('a').bind('click',function(){
        $sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

这将在一个始终存在于DOM（document）中的元素上使用事件委托，而如果它们是外部页面的一部分，则.hor-nav元素并不总是存在于DOM中

看起来你有其他代码依赖于document.ready事件，jQuery Mobile网站不应该这样。请查看此文档：http://jquerymobile.com/demos/1.1.0/docs/api/events.html（注意大黄色警告）

jQuery移动转换冲突Jquery？

1 个答案: