Click events firing multiple times on button generated dynamically

Question

I generate with jquery, one dynamic div content. When I click on #change_alert I display an alert. If I click second time on #change_alert, the alert is displaying 2 times. If I click third time on #change_alert, the alert is displaying 3 times. Do you have an idea to help me and have juste one alert (even if I click more) ?

Thank you

var dynamic_content = '<div id="change">'+
           '<div class="view">'+
           '<a href="#" id="change_alert">CLICK</a>'+
            '</div></div>';



$$(document).on('click', '#change_alert', function () {
 alert("TEST !");
});

You're sure it isn't adding the event handler multiple times? Also, maybe if it's bubbling weird you could try passing the event to the click handler and adding event.stopPropagation() at the top to keep it from triggering on anything else up the DOM. — Jonathan Bowman
– Jonathan Bowman, Commented Apr 18, 2018 at 14:40

STJ · Accepted Answer · 2018-04-18 14:42:29Z

1

I have tried this code and it works:

$(document).ready(function() {
  var dynamic_content = '<div id="change">'+
        '<div class="view">'+
       '<a href="#" id="change_alert">CLICK</a>'+
        '</div></div>';

  $('#content').html(dynamic_content);

  $(document).on('click', '#change_alert', function () {
    alert("TEST !");
  });
});

Maybe you are creating more than one dynamic button.

answered Apr 18, 2018 at 14:42

STJ

514 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Click events firing multiple times on button generated dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related