Question

我正在将一个普通网站转移到jQuery mobile。我有一些事件绑定，以及其他页面特定的调整：

$('.roulette-img').css({
});

$('.shuffle-img').each(function(){
});

$('.button').bind('mousedown', function(){
});

$('.spin-btn').bind('mousedown', function(){
    $(document).bind('mouseup', function(){
    });
})

$(window).resize(function(){
});

现在某些页面无法正常工作（通过不触发这些事件）。我理解这是因为jQuery的ajax导航，脚本只在第一页加载时加载一次，因此通过AJAX加载的所有后续内容都没有绑定到事件。

哪种方式最好绕过它？

Answer 1

首先不要使用bind，它已被弃用并从jQuery版本1.9 +中删除。请改用。这是一个例子：

$('#buttonID').on('click', function(){       

});

此外，如果您想在某个页面内执行某些内容，则需要在jQuery Mobile页面事件中执行此操作，如下所示：

$(document).on('pagebeforeshow', '#index', function(){       

});

我为你做了一个工作的例子：http://jsfiddle.net/Gajotres/8hKe2/

在这里，您可以看到使用页面事件执行特定页面代码的内容。

您可以在此答案/文章中找到您想知道的所有内容： jQuery Mobile: document ready vs page events

Answer 2

如果您希望处理程序在加载时绑定到新页面，您可以使用pageinit事件并将选择器限制为当前初始化的页面：

$(document).on("pageinit", function(e) {
    $(".button", e.target).on("mousedown", function() {
        // ...
    });

    $(".spin-btn", e.target).on("mousedown", function() {
        // ...
    });
});

如何让事件绑定在jQuery mobile上运行？

2 个答案: