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

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

尝试使用刷新函数：

.refresh()

Answer 2

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

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

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

解决方案是使用 jQuery on 事件处理程序在根 div 页面绑定实时事件侦听器，而不是文档，并监听 #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 中的冲突如下：Jquerymobile - $.mobile.changepage

Answer 3

我不确定这是否也适用于 jQuery Mobile。
但看起来您的菜单是在网站完全加载后创建或插入到 DOM 中的。
这意味着您无法向其中添加 .tap() ，因为您无法访问菜单，因为此时尚未创建菜单！尝试使用 .on() 或 .live() （即使它已被废弃）

Answer 4

这是正确的修复和代码：

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

感谢 Clay Liu！