1

我有以下非常简单的代码片段，它从一个单独的文件加载到我正在构建的多页面站点中的一个 jQuery Mobile 页面中：

$(document).ready(function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
            $(indexState).show();
      });
})

它正在工作，但现在它仅在我重新加载页面时才有效。我正在使用 Firebug 检查页面加载，它并没有始终如一地加载 jQuery 文件，因为这个链接在重新加载之前没有显示。

<script src="inc/jquery/belmont.custom.js"></script>

通常，当在 jQuery mobile 中调用新页面时，控制台会显示，但我确实发现当单击指向它的链接时，该特定页面并不总是显示在控制台日志中。我已经在桌面模拟器（Dashcode 的 iOS 模拟器）、桌面浏览器（FF 和 Safari）和我的 iPhone 上进行了测试，结果都相同。

有没有人见过这种行为？我怎样才能确保它始终如一地工作？

编辑：我已将代码更改为使用绑定，如下所示：

$(document).bind('pageinit', function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
        $(indexState).show();
    });
})

我已将 console.log(indexState) 添加到该函数中，但这也不会始终如一地触发。

实际上我之前说错了——这是一个由单页组成的移动网站。我是否必须将 jQuery 自定义函数脚本加载到每个页面中？或者我可以把它加载到有问题的那个吗？

4

1 回答 1

0

这是我如何整理出来的。由于 jQM 使用 AJAX 加载每个后续页面，因此您需要像处理任何其他动态加载的元素一样处理这样的交互。更改bind()为on()（我正在使用 jQuery 1.7+）让一切正常工作：

$('body').on('pageinit', '#id_of_page_using_function', function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
        $(indexState).show();
    });
})
于 2012-06-18T15:09:06.217 回答