php - Jquery 手机 : New Ajax Loaded Page not Loading new JS

Question

这是我当前的设置。

我有两个页面在 jquery 移动框架上运行。

• index.php
• 文章.php

在打扰 header 中，我有一个名为 ratings.js 的 js 文件。

这是我的 js ratings.js:

$(document).ready(function(){
    $("#rating_1").click(function () {
        $("#rating_2").css('backgroundPosition', '0px 0px');
        $(this).css('backgroundPosition', '-45px 0px');
    }); 
}); 

当我加载 index.php 然后转到 article.php 时，我对 ratings.js 的触发器都不起作用。

如果我添加 rel="external" 或 data-ajax="false" 我的触发器工作。 然而，我失去了让我的装载机轮子出现的能力。

有什么建议吗？

谢谢!

Answer 1

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

• http://jquerymobile.com/demos/1.1.0/docs/api/events.html

尝试:

$(document).bind('pageinit', function() {
    $("#rating_1").click(function() {
        $("#rating_2").css('backgroundPosition', '0px 0px');
        $(this).css('backgroundPosition', '-45px 0px');
    }); 
});