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

[mfiyalka]

Добрый день!

Добавляю товар в корзину через 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 работали событии на кнопке?

[BalykhinAS]

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

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

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

[Nex-Otaku]

Варианты:

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

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

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

[andku83]

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

или к контейнеру который не перегружается ajax'om

[mfiyalka]

Я правильно понимаю? (Простите, в 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')
    });

[BalykhinAS]

Я правильно понимаю? (Простите, в 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]

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

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

или

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

    $( '#cart_widget').on('click', '.header-dropdown', function(){
        ...
    });

$( '#cart_widget') - он же не меняется, меняется его содержимое

[mfiyalka]

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

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

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

[BalykhinAS]

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

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

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]

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

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

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]

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

[andku83]

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

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