Связывание событий с динамически добавленными элементами класса с помощью функции .click

Daniel Almeida спросил: 10 мая 2018 в 04:13 в: jquery

У меня есть следующий код:

<div class="row">
    <div class="image">
        <div class="slider-img" style="background-image: url('<?php echo site_url('assets/imagens/gama-doce-slider.png') ?>');"></div>
        <div class="bottom-buttons">
            <span class="see-package">See Package</span>
        </div>
    </div>
</div><script type="text/javascript">
$(document).ready(function(){
// First part, change background to the package image and change the text
    $(".see-package").click(function() {
        $(".slider-img").css("background-image", "url(../assets/imagens/embalagem-teste.jpg)");
        $(this).addClass( "see-product" );
        $(this).removeClass( "see-package" );
        $(this).text( "See Product" );
    });
// Second part, adding back the 'see package' and changing background to original
    $(".image .bottom-buttons").on("click", ".see-product", function(event){
        $(".slider-img").css("background-image", "url(../assets/imagens/gama-doce-slider.png)");
        $(this).addClass( "see-package" );
        $(this).removeClass( "see-product" );
        $(this).text( "See Package" );
    });
});
</script>

Цель этого - уметь для изменения фона .slider-img и текста span, чтобы пользователь мог поменять "see package" и "see product".

Вторая часть кода jquery основана на том, что Я читал в этой теме: Связывание событий с динамически создаваемыми элементами?

  • Если я удалю вторую часть, код будет работать отлично, текст и фон (без возможности изменения back ofc)
  • Если я добавлю вторую часть, она больше не меняет фон, но все равно изменяет текст span.

Что я делаю неправильно?

1 ответ

Есть решение
Damian Dziaduch ответил: 10 мая 2018 в 04:26

Первый прослушиватель событий прикрепляется непосредственно к элементу. Когда вы меняете класс, слушатель все еще там, слушая клик. Поэтому, когда вы меняете класс на see-product и нажимаете на него, вызывается два слушателя.

Вы можете изменить это поведение, добавив первый слушатель так же, как второй:

Daniel Almeida ответил: 10 мая 2018 в 04:33
Большое спасибо за простое и ясное объяснение! Оно работает!