Question

这是我目前的设置。

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

的index.php
article.php

在麻烦的标题中，我有一个名为rating的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

重要提示：请使用$(document).bind('pageinit')，而不是   $(document).ready()

你在jQuery中学到的第一件事就是在里面调用代码   $(document).ready()函数，所以一切都会尽快执行   DOM已加载。但是，在jQuery Mobile中，Ajax用于加载   导航时每个页面的内容都放入DOM中，并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面，您可以绑定到pageinit事件。   此事件在本页底部详细说明。

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');
    }); 
});

Answer 2

你应该把所有东西放在里面：

<div id="page" data-role="page">
<!--here-->
</div>

加载ajax时，不会加载<head></head>部分中的脚本。

Answer 3

问题是jQuery通过Ajax加载页面，因此它只加载

<div data-role="page"> </div>

页面的一部分。

你可以做3件事来解决这类问题。

1。）你已经尝试过的那个（这是一个数据-ajax = false），它会让你的页面再次完全加载而不显示你的加载轮。

2.）您可以将活动视为直播活动：

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

这将使它找到任何新的＃rating_1并将点击事件添加到它。'

3.。）您可以使用$(document).ready函数来代替使用$( '#myPage' ).live( 'pageinit',function(event){};。

Jquery Mobile：新的Ajax加载页面没有加载新的JS

3 个答案: