Event binding on dynamically added class elements by .click function

Question

I have the following code:

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

The objective of this, is to be able to change background of .slider-img and text of the span, in order that the user can swap between 'see package' and 'see product'.

The second part of the jquery code is based on what I was reading in this thread: Event binding on dynamically created elements?

If I remove the second part, the code works perfectly, only changing the text and background (with no option to change back ofc)
If I add the second part, it doesn't change the background anymore, but it does still change the text of the span.

What am I doing wrong?

score 1 · Accepted Answer · answered Jun 03 '18 at 18:06

The first event listener is attached directly to the element. When you change it's class the listener is still there, listening for the click. So when you change the class to see-product and click it, two listeners are fired.

You can amend this behavior by attaching the first listener in the similar way as the second one:

$(document).ready(function(){
// First part, change background to the package image and change the text
    $(".image .bottom-buttons").on("click", ".see-package", function(event){
        $(".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" );
    });
});

Thanks alot for the simple and clear explanation! It works! – Daniel Almeida Jun 03 '18 at 18:13 — Daniel Almeida, Jun 03 '18 at 18:13

Event binding on dynamically added class elements by .click function

1 Answers1