1

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

现在，当我单击 Commercial 或 Residential 按钮时，它可以正常工作，但是当您转到服务页面时，jQuery 中的“切换”将不起作用 - 实际上所有 jQuery 脚本都停止工作（主页上的滑块也是如此）。

如果页面实际上被重新加载，那么在用户转到另一个链接之前一切都很好，然后一切都中断了。这与我正在使用的 (document).ready 函数有关吗（您可以在标题中看到）。

任何想法如何防止这种冲突或通过导航链接访问时强制 jQuery 切换在所有页面上工作？

谢谢

4

1 回答 1

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（注意大的黄色警告）

于 2012-06-15T18:35:53.147 回答