Jquery mobile jQuery事件不会'；在jQuery Mobile中加载Ajax后工作

我对jquerymobile还是个新手，它肯定是一个很棒的框架

我希望有人能帮助我。我在加载ajax页面后遇到jquery事件问题

下面的代码将在第一个页面加载时工作，但在访问其他页面后将无法工作

JS

HTML

我尝试过使用pageinit（）和pageshow（），但仍然不起作用

任何帮助都将不胜感激

WorpAddress中my header.php中的代码：

    <div data-role="page" id="indexPage" class="blog page">

    <script type="text/javascript"> 

        jQuery("div:jqmData(role='page'):last").bind('pageshow', function(){
              //your code here - $.mobile.activePage works now
            jQuery.mobile.activePage.on('tap', '.menu', function(){
                alert('test');
                jQuery.mobile.activePage.find('ul.sub-menu').slideToggle('slow');
            });
        });

    </script>


        <?php
        //Get data theme from theme options

        $options = get_option('touch_theme_options');
        $theme = $options['color_option'];

        ?>

        <div id="logo">
            <a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/converse/images/sofrep-logo-mobile.png" alt="<?php bloginfo('title'); ?>"></a>
        </div>

        <div data-theme="<?php echo $theme ?>">
            <input type="button" id="menu" class="menu" value="Menu" data-icon="arrow-d"/>
            <ul class="sub-menu" data-role="listview">     
                <li><a href="#">Link 1</a></li>              
                <li><a href="#">Link 2</a></li>         
                <li><a href="#">Link 3</a></li>     
            </ul>
        </div>

jQuery（“div:jqmData（role='page'）：last”）.bind（'pageshow'，function（）{
//这里的代码-$.mobile.activePage现在可以使用了
jQuery.mobile.activePage.on（'tap'，'menu'，function（））{
警报（“测试”）；
jQuery.mobile.activePage.find（'ul.sub-menu'）。slideToggle（'slow'）；
});
});
我不确定这是否也适用于jQuery Mobile。

但您的菜单似乎是在站点完全加载后创建或插入到DOM中的。

这意味着您无法向其添加
.tap（）
，因为您无法访问菜单，因为此时尚未创建该菜单！尝试使用
.on（）
或
.live（）（甚至是它的去污版）
这里需要一些背景信息，jQuery通过AJAX加载页面并将其插入到同一HTML页面中，它从第二页拉入的唯一代码是div[data role=“PAGE”]这意味着如果你有JS在那里，它不会被拉进去

您最初是通过ID引用DOM元素并对其进行绑定，这实际上不起作用，因为jQM将多个页面加载到一个html页面中，您可能有多个具有相同ID的元素，您需要的是对当前页面的引用，即$.mobile.activePage，它在
pageshow

我在您的评论中看到，您使用了live event，这是朝着正确方向迈出的一步，但是如果该代码运行多次，它将绑定多个live events，这就是为什么您会看到3张幻灯片

解决方案是使用jQuery事件处理程序在根div页面（而不是文档）绑定实时事件侦听器，并侦听#菜单

您需要在jQM的pageinit事件处理程序中运行此代码，请参见下面的链接



这里有一个类似的问题：，我有一个更彻底的解决方案，可以在jQM中绑定没有冲突的事件：
下面是正确的修复程序和代码：

        jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
            jQuery(this).on('tap', '#menu', function(){
                 jQuery("div:jqmData(role='page'):last").find('ul.sub-menu').slideToggle('slow');
                console.log('clicked');
            });
        });

多亏了克莱·刘
 尝试使用刷新功能：

.refresh（）
也许您需要像
on
、
delegate
、
live
这样的委托事件？谢谢您的回答。我已经在

和上尝试了

。live

它仍然无法工作。该事件仅在第一个页面加载时有效，jquery mobile使用ajax加载页面？如果没有，也许我可以进一步帮助你！我试过：

jQuery（'#menu'）.live（'tap'，function（event）{jQuery（“ul.sub-menu”）.slideToggle（“slow”）；}；

。。不幸的是，

slidetoggle（）

函数工作起来很奇怪，它在一次点击后滑动了3次。哇！非常感谢@Clay Liu它确实起作用了，谢谢你的回答，它确实帮了我很多忙，我还是新手，正在学习JQM。顺便说一句，我用过这个代码<代码>jQuery（“div:jqmData（role='page'）：last”）.bind（'pageshow'，function（）{//您在这里的代码-$.mobile.activePage现在可以工作了jQuery.mobile.activePage.on（'tap'，'#menu'，function（）{jQuery.mobile.activePage.find（'ul.sub menu'）。slideToggle（'slow'）；}）它在访问其他页面时运行良好，但在根div页面上，它会滑动3次。你知道怎么了吗？我已经用过上面的代码了。我有点困惑，你有没有每一页上所有代码的副本？代码段的工作方式是，您只有与正在加载的页面相关的代码。听起来你好像在某种程度上将多个侦听器绑定到你的第一页。当按回到原始页面时，是否会看到多张幻灯片？不管您遇到什么冲突，我都需要查看您的所有代码。但是，尝试使用console.log或在每个事件处理程序上具有唯一消息的警报，您应该能够跟踪被多次调用的事件。如果我转到下一页并返回原始页，将出现两个警报。啊，我的错，我应该说是pageinit事件，而不是pageshow事件。pageinit只触发一次，就像jQuery中的document.ready一样。当你按下返回键时，pageshow再次启动，我已经更新了原始答案中的片段。

    <div data-role="page" id="indexPage" class="blog page">

    <script type="text/javascript"> 

        jQuery("div:jqmData(role='page'):last").bind('pageshow', function(){
              //your code here - $.mobile.activePage works now
            jQuery.mobile.activePage.on('tap', '.menu', function(){
                alert('test');
                jQuery.mobile.activePage.find('ul.sub-menu').slideToggle('slow');
            });
        });

    </script>


        <?php
        //Get data theme from theme options

        $options = get_option('touch_theme_options');
        $theme = $options['color_option'];

        ?>

        <div id="logo">
            <a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/converse/images/sofrep-logo-mobile.png" alt="<?php bloginfo('title'); ?>"></a>
        </div>

        <div data-theme="<?php echo $theme ?>">
            <input type="button" id="menu" class="menu" value="Menu" data-icon="arrow-d"/>
            <ul class="sub-menu" data-role="listview">     
                <li><a href="#">Link 1</a></li>              
                <li><a href="#">Link 2</a></li>         
                <li><a href="#">Link 3</a></li>     
            </ul>
        </div>

jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
    $(this).on('tap', '#menu', function(){
         $(this).find('ul.sub-menu').slideToggle('slow');
    });
});

        jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
            jQuery(this).on('tap', '#menu', function(){
                 jQuery("div:jqmData(role='page'):last").find('ul.sub-menu').slideToggle('slow');
                console.log('clicked');
            });
        });