jQuery的功能只适用于重载

我已经是从一个单独的文件加载到一个jQuery Mobile的页面在多页的网站下面的非常简单的代码片段，我建设：jQuery的功能只适用于重载

$(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自定义函数脚本加载到每个页面中？或者我可以将它加载到相关问题中？

来源

2012-06-17 Jay Blanchard

我能得到它整理出来。首先，必须在jQuery核心文件之后立即加载自定义js文件。其次，使用$（document）.bind（'pageinit'，function（）{....）比使用ready方法更好。 –

今天上午再次审查之后，似乎问题依然存在。你需要重新加载页面，其他的工作不在门口。我更新了上面的代码以反映我所做的更改。 –

下面是我如何整理出来的。由于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-18 15:09:06

jQuery的功能只适用于重载

回答

相关问题