После pjax.reload не работают события на кнопке

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
mfiyalka
Сообщения: 11
Зарегистрирован: 2016.09.07, 22:17

После pjax.reload не работают события на кнопке

Сообщение mfiyalka » 2018.03.02, 14:36

Добрый день!

Добавляю товар в корзину через ajax и сразу обновляю виджет корзины на главной страницы через pjax.reload:

Код: Выделить всё

$('.block2-btn-addcart').each(function(){
        var nameProduct = $(this).parent().parent().parent().find('.block2-name').html();
        $(this).on('click', function(){
            var params = {
                'id': $(this).find('button').attr('data-id'),
                '<?= Yii::$app->request->csrfParam ?>' : '<?= Yii::$app->request->getCsrfToken()?>'
            };
            $.post('/shop/cart/ajax-add', params, function(data) {
                if (data.success) {
                    $.pjax.reload({container: '#cart_widget'});
                    swal(nameProduct, "Добавлен в корзину!", "success");
                } else {
                    swal(nameProduct, data.message, "error");
                }
            });
            return false;
        });
    });

Код: Выделить всё

<?php Pjax::begin(['id' => 'cart_widget']); ?>
	<?= CartWidget::widget() ?>
<?php Pjax::end(); ?>
Корзина обновилася, но не работает клик по ней:

Код: Выделить всё

(function ($) {
    "use strict";

    /*[ Show header dropdown ]
    ===========================================================*/

    $('.js-show-header-dropdown').on('click', function(){
        $(this).parent().find('.header-dropdown')
    });

    var menu = $('.js-show-header-dropdown');
    var sub_menu_is_showed = -1;

    for(var i=0; i<menu.length; i++){
        $(menu[i]).on('click', function(){

                if(jQuery.inArray( this, menu ) == sub_menu_is_showed){
                    $(this).parent().find('.header-dropdown').toggleClass('show-header-dropdown');
                    sub_menu_is_showed = -1;
                }
                else {
                    for (var i = 0; i < menu.length; i++) {
                        $(menu[i]).parent().find('.header-dropdown').removeClass("show-header-dropdown");
                    }

                    $(this).parent().find('.header-dropdown').toggleClass('show-header-dropdown');
                    sub_menu_is_showed = jQuery.inArray( this, menu );
                }
        });
    }

    $(".js-show-header-dropdown, .header-dropdown").click(function(event){
        event.stopPropagation();
    });

    $(window).on("click", function(){
        for (var i = 0; i < menu.length; i++) {
            $(menu[i]).parent().find('.header-dropdown').removeClass("show-header-dropdown");
        }
        sub_menu_is_showed = -1;
    });

})(jQuery);
Как сделать, чтобы после pjax.reload работали событии на кнопке?

Wizard
Сообщения: 170
Зарегистрирован: 2018.02.05, 13:41
Контактная информация:

Re: После pjax.reload не работают события на кнопке

Сообщение Wizard » 2018.03.02, 14:41

...
$(menu).on('click', function(){
...

Код: Выделить всё

$(document).on('click', '.selector', function() {
...
});

Nex-Otaku
Сообщения: 825
Зарегистрирован: 2016.07.09, 21:07

Re: После pjax.reload не работают события на кнопке

Сообщение Nex-Otaku » 2018.03.02, 14:44

Варианты:

1. Заново привязать события после перезагрузки.

2. Цеплять события не к элементу, а к документу по селектору.

Да, забыл сказать - это не Yii2. Это азы яваскрипта.

andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: После pjax.reload не работают события на кнопке

Сообщение andku83 » 2018.03.02, 14:57

Nex-Otaku писал(а):
2018.03.02, 14:44
2. Цеплять события не к элементу, а к документу по селектору.
или к контейнеру который не перегружается ajax'om

mfiyalka
Сообщения: 11
Зарегистрирован: 2016.09.07, 22:17

Re: После pjax.reload не работают события на кнопке

Сообщение mfiyalka » 2018.03.02, 15:10

Я правильно понимаю? (Простите, в js не силен)

Код: Выделить всё

<element id="after_cart_widget">
    <?php Pjax::begin(['id' => 'cart_widget']); ?>
        <?= CartWidget::widget() ?>
    <?php Pjax::end(); ?>
</element>

Код: Выделить всё

 $('#after_cart_widget').on('click', function(){
        $(this).parent().find('.header-dropdown')
    });

Wizard
Сообщения: 170
Зарегистрирован: 2018.02.05, 13:41
Контактная информация:

Re: После pjax.reload не работают события на кнопке

Сообщение Wizard » 2018.03.02, 15:18

mfiyalka писал(а):
2018.03.02, 15:10
Я правильно понимаю? (Простите, в js не силен)

Код: Выделить всё

<element id="after_cart_widget">
    <?php Pjax::begin(['id' => 'cart_widget']); ?>
        <?= CartWidget::widget() ?>
    <?php Pjax::end(); ?>
</element>

Код: Выделить всё

 $('#after_cart_widget').on('click', function(){
        $(this).parent().find('.header-dropdown')
    });

Код: Выделить всё

 $(document).on('click', '#after_cart_widget', function(){
        $(this).parent().find('.header-dropdown')
    });

andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: После pjax.reload не работают события на кнопке

Сообщение andku83 » 2018.03.02, 15:54

Wizard писал(а):
2018.03.02, 15:18

Код: Выделить всё

 $(document).on('click', '#after_cart_widget', function(){
        $(this).parent().find('.header-dropdown')
    });
или

Код: Выделить всё

    $( '#cart_widget').on('click', '.header-dropdown', function(){
        ...
    });
$( '#cart_widget') - он же не меняется, меняется его содержимое

mfiyalka
Сообщения: 11
Зарегистрирован: 2016.09.07, 22:17

Re: После pjax.reload не работают события на кнопке

Сообщение mfiyalka » 2018.03.02, 17:06

Как получить доступ ко второму событию?

Код: Выделить всё

for(var i=0; i<menu.length; i++){
	$(menu[i]).on('click', function(){
		...
	}

Wizard
Сообщения: 170
Зарегистрирован: 2018.02.05, 13:41
Контактная информация:

Re: После pjax.reload не работают события на кнопке

Сообщение Wizard » 2018.03.02, 17:06

mfiyalka писал(а):
2018.03.02, 17:06
Как получить доступ ко второму событию?

Код: Выделить всё

for(var i=0; i<menu.length; i++){
	$(menu[i]).on('click', function(){
		...
	}
все так же))))

Код: Выделить всё

for(var i=0; i<menu.length; i++){
	$(document).on('click', menu[I], function(){
		...
	}

mfiyalka
Сообщения: 11
Зарегистрирован: 2016.09.07, 22:17

Re: После pjax.reload не работают события на кнопке

Сообщение mfiyalka » 2018.03.02, 18:03

Wizard писал(а):
2018.03.02, 17:06
mfiyalka писал(а):
2018.03.02, 17:06
Как получить доступ ко второму событию?

Код: Выделить всё

for(var i=0; i<menu.length; i++){
	$(menu[i]).on('click', function(){
		...
	}
все так же))))

Код: Выделить всё

for(var i=0; i<menu.length; i++){
	$(document).on('click', menu[I], function(){
		...
	}
Так не работает

Nex-Otaku
Сообщения: 825
Зарегистрирован: 2016.07.09, 21:07

Re: После pjax.reload не работают события на кнопке

Сообщение Nex-Otaku » 2018.03.02, 18:08

Просьба модератору, перенести эту тему обучения азам яваскрипта в соответствующий раздел.

andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: После pjax.reload не работают события на кнопке

Сообщение andku83 » 2018.03.02, 18:21

Код: Выделить всё

 $(document).on('click', '.js-show-header-dropdown', function(){
       ...
       });

Ответить