Событие jQuery не будет работать после загрузки Ajax в jQuery Mobile - PullRequest
Новая
       32

Событие jQuery не будет работать после загрузки Ajax в jQuery Mobile

2 голосов
/ 09 февраля 2012

Я все еще новичок в Jquery Mobile, и, безусловно, это отличный фреймворк.

Надеюсь, кто-нибудь сможет мне помочь.У меня проблемы с событиями jquery после загрузки страницы ajax.

Следующий код будет работать при загрузке первой страницы, но после посещения других страниц он не будет работать.

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 (), но все равно он не будет работать.

Любая помощь будет принята с благодарностью.

Код в моем header.php в worpdress: 

    <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 ]

2 голосов
/ 09 февраля 2012

Здесь нужна небольшая справочная информация, jQuery загружает страницы через AJAX и вставляет их в ту же страницу HTML, единственный код, который он извлекает со 2-й страницы, это что-то между div [data-role = "page"]это означает, что если у вас есть JS, он не будет втянут.

Вы изначально ссылались на элемент DOM по идентификатору и связывали его, на самом деле это не работает, поскольку jQM загружает несколько страниц вНа одной html-странице вы можете иметь несколько элементов с одинаковым идентификатором. Вам нужна ссылка на текущую страницу, которая называется $ .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');
    });
});

Вам нужно будет запустить этот код в обработчике событий pageinit jQM, см. Ссылки ниже

Здесь есть похожий вопрос: https://stackoverflow.com/a/9200797/737023, У меня есть более подробное решение о хорошем способе связывания событий без конфликтов в jQM здесь: Jquerymobile - $ .mobile.changepage

0 голосов
/ 30 апреля 2013

Попробуйте использовать функцию обновления:

.refresh()

0 голосов
/ 10 февраля 2012

Вот правильное исправление и код: 

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

Благодаря Клэй Лю!

0 голосов
/ 09 февраля 2012

Я не уверен, подходит ли это и для jQuery Mobile.
Но, похоже, ваше меню создается или вставляется в DOM после полной загрузки сайта.
Что означает, что вы не можетедобавьте .tap() к нему, потому что вы не можете получить доступ к меню, поскольку оно не было создано на данный момент!Попробуйте использовать .on() или .live() (even its depricated)

...