使用 jQuery，无法将点击行为添加到使用 innerHTML 创建的按钮

Question

I have some buttons and I added some behavior on click to all of them with jQuery and they worked fine, but now that those buttons are generated dynamically by changing the innerHTM L of the div with a script, the behavior don't work anymore

Here is an example, like this every time I click any of the two buttons, it show an alert with the message 'clicked' .

Fiddle

 $('.foo').on('click', function(){ alert('clicked'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="home"> <button class='foo' > Test </button> <button class='foo' > Test </button> </div>

But if I insert the buttons by changing the innerHTML of home with the button generate, it does not works anymore

Fiddle

 $(".gen").on("click", function(){ $('.home').html( "<button class='foo' > Test </button>" + "<button class='foo' > Test </button>"); }) $('.foo').on('click', function(){ alert('clicked'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button class="gen" > Generate </button> </div> <div class="home"> </div>

I really don't know what's going on

Answer 1

$('.foo') selects certain elements. .on() adds an event handler to only the selected elements. Any new elements with the "foo" class will not have that handler. Either add them manually to the new elements or better still use a delegate.

Basically, since your "foo" elements do not exist until after you click "generate", the call to .on() adds a handler to nothing.

Here's a solution using jQuery's delegate implementation

 $(".gen").on("click", function(){ $('.home').html( "<button class='foo' > Test </button>" + "<button class='foo' > Test </button>"); }) $(document).on('click', '.foo', function(){ console.log('clicked'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button class="gen" > Generate </button> </div> <div class="home"> </div>