2

我还是 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() 但它仍然不起作用。

任何帮助将不胜感激。

我在 wrpdress 中的 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>
4

4 回答 4

2

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

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

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

解决方案是使用事件处理程序上的 jQuery在根 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

于 2012-02-09T17:59:08.933 回答
0

我不确定这是否也适用于 jQuery Mobile。
但是，您的菜单似乎是在站点完全加载后创建或插入到 DOM 中的。
这意味着您无法添加.tap()到它，因为您无法访问菜单，因为此时尚未创建它！尝试使用.on()或.live() (even its depricated)

于 2012-02-09T11:01:31.140 回答
0

这是正确的修复和代码：

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

感谢刘克莱！

于 2012-02-10T05:52:01.880 回答
0

尝试使用刷新功能：

.refresh()

于 2013-04-30T05:12:38.880 回答