Dynamically inserted button don't respond to 'onclick'

Question

I can't make my button respond to clicks. I generated this button using html() method:

var button1 = '<button class="btn btn-default" id="button1">Back</button>';
$(".component").html(button1);

This button renders on the screen, but doesn't work, nothing happens when I click.

$("#button1 ").on('click',function(e){
        console.log("clicked");
});

The same html code inserted by hand (hardcoded) works fine.

There is a space in id of your jquery selector. Try below code. `$(document).on('click',"#button1",function(e){` ` console.log("clicked");` `}` — Pankaj Makwana, Jul 18 '17 at 13:53
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Jul 18 '17 at 13:55
you have to add the element before you bind the click handler, or delegate the event from a parent element. — Daniel Beck, Jul 18 '17 at 19:50

adeneo · Answer 1 · 2017-07-18T13:56:29.020

2

You probably need delegated event handlers, but in this case just creating the element with jQuery solves the issue and looks better.

var button1 = $('<button />', {
  'class' : 'btn btn-default',
  id      : 'button1',
  text    : 'Back',
  on      : {
    click : function() {
      console.log('clicked');
    }
  }
});

$(".component").html(button1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="component"></div>

edited Jul 18 '17 at 13:56

answered Jul 18 '17 at 13:55

adeneo

293,187
26
361
361

"looks better" - that must be subjective because your version looks nasty to me. – freedomn-m Jul 18 '17 at 13:56
@freedomn-m - It looks great to me, a lot better than passing strings of HTML to `$()`, and a lot better than delegating the event for a single element to a parent. – adeneo Jul 18 '17 at 13:56

score 0 · Answer 2 · answered Jul 18 '17 at 13:53

0

You should delegate events to elements created after DOM was loaded.

$(document).on('click','#button1',function(e){
        console.log("clicked");
}

answered Jul 18 '17 at 13:53

Himanshu Upadhyay

6,220
1
13
32

score 0 · Answer 3 · answered Jul 18 '17 at 13:54

That's because jquery binds your click event when your browser reads the page. When you dynamically insert your button, it has no event binded.

You should put the code that binds the click event after the code which inject the button. Or put the code about the click event in a function and call it whenever a newly injected button needs its click event to be handled.

score 0 · Answer 4 · edited Jul 18 '17 at 14:19

You have some mistakes in your code.

You have a space after button1 here

$("#button1 ")

And you have ommited ); after onclick function.

There is a code who run perfectly

var button1 = '<button id="button1">Back</button>';
$(".component").append(button1);
$("#button1").on('click', function() {
  alert("clicked");
});

.component {
  width: 200px;
  height: 200px;
  border: solid 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="component">

</div>

And it's better to use .append() not .html() because .html() overwrite the whole html content of the container.

Dynamically inserted button don't respond to 'onclick'

4 Answers4