如何在jQuery mobile上实现事件绑定？

Question

我正在将一个普通网站转换为jQuery移动端。我已经做了一些事件绑定，以及其他页面特定的调整：

$('.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加载的所有后续内容都不会绑定到事件上。

最好的方法是什么？

- styke

---

你的问题中的代码是否位于“ready”处理程序中？ - Frédéric Hamidi

它驻留在一个自调用函数中。 - styke

Answer 1

首先不要使用bind，它已经在jQuery 1.9 +版本中被弃用并移除。改用on替代。以下是一个例子：

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

});

此外，如果您想在特定页面内执行某些操作，则需要在jQuery Mobile页面事件内执行，例如：

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

});

我为您制作了一个可工作的示例：http://jsfiddle.net/Gajotres/8hKe2/ 在这里，您可以看到如何使用页面事件来执行特定页面的代码。

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

- Gajotres

---

非常感谢，这篇文章真是太棒了。非常深入，正好符合我的需求。保重。 - styke

@Gajotres，我记得我们之前已经讨论过这个问题了，但是你不觉得绑定到pagebeforeshow而不是pageinit会导致如果一个页面被隐藏然后再次显示，mousedown处理程序会被绑定多次吗？ - Frédéric Hamidi

这只是一个例子。我已经在另一篇文章中详细描述了这个问题，所以没有必要解释得太多。这篇文章的链接是：https://dev59.com/dGYq5IYBdhLWcg3wcwWE#14469041，这也是我回答中提到的同一篇文章。 - Gajotres

另外，bind()既不被弃用也没有被移除。可以说on()已经取代了它，但是bind()和unbind()仍然可以使用。你是不是在考虑live()和die()？ - Frédéric Hamidi

Answer 2

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

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

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

- Frédéric Hamidi