jquery-mobile - 在 jQuery Mobile 中加载 Ajax 后，jQuery 事件将无法工作

Question

我对 Jquery Mobile 还很陌生，它绝对是一个很棒的框架。

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

下面的代码在首页加载时可以工作，但在访问其他页面后就不起作用了。

JS

   jQuery("#menu").tap(function () {
        jQuery("ul.sub-menu").slideToggle("slow");
    });

HTML

<input type="button" id="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 1</a></li>
</ul>      

我尝试过使用 pageinit() 和 pageshow() 但仍然不起作用。

任何帮助将不胜感激。

worpdress 中我的 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>

Answer 1

这里需要一些背景信息，jQuery 通过 AJAX 加载页面并将其插入到同一 HTML 页面中，它从第二页提取的唯一代码是 div[data-role="page"] 之间的任何内容这意味着如果你在那里有 JS，它就不会被拉进去。

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

之后可用

我在您的评论中看到您使用了实时事件，这是朝着正确方向迈出的一步，但如果该代码运行多次，它将绑定(bind)多个实时事件，这就是您获得 3 张幻灯片的原因。

解决方案是使用 jQuery on事件处理程序在根 div 页面(而不是文档)绑定(bind)实时事件监听器，并监听 #menu

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

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

这里有一个类似的问题:https://stackoverflow.com/a/9200797/737023 ，我有一个更彻底的解决方案，关于在 jQM 中绑定(bind)事件而不发生冲突的好方法:Jquerymobile - $.mobile.changepage