Event in jQuery .html() won't detect

Question

I'm trying to use a button that is printed by .html(). I've tried .find() after searching through this site but the onclick event still seem not detected.

<div id = "div4html">div</div>
<button id="printbtn">printbtn</button>

<script>
$("#printbtn").on( "click", function() {
    $("#div4html").html('<button id ="btntest">btntest</button>');
});

$("#div4html").find("#btntest").on( "click", function() { 
    alert("on click");
});
</script>

while the #btntest onclick doesn't show an alert, the CSS on #btntest works. There is something I don't know about elements that are created dynamically?

Learn [Event Delegation](http://learn.jquery.com/events/event-delegation/) i.e. `$("#div4html").on( "click", "#btntest", function() { ` — Satpal, May 10 '17 at 05:50

score 1 · Answer 1 · edited May 10 '17 at 06:25

1

You can't do this because js don't even for events in newly created content by default.

Here is the way to do it :

$("#div4html").on('click', "#btntest" , function() {
// Your code
}

edited May 10 '17 at 06:25

Alive to die - Anant

70,531
10
51
98

answered May 10 '17 at 05:55

Kuu Aku

320
2
6

Seems identical to mine.but correct so +1 – Alive to die - Anant May 10 '17 at 09:22

score 0 · Answer 2 · edited May 10 '17 at 09:23

0

Delegate the event from the body

$("body").on( "click",'#btntest', function() { 
   alert("on click");
});

edited May 10 '17 at 09:23

Alive to die - Anant

70,531
10
51
98

answered May 10 '17 at 05:50

brk

48,835
10
56
78

Instead of delegate through body it's best to delegate through parent itself. less traversal, fast and correct approach. – Alive to die - Anant May 10 '17 at 06:06

score 0 · Accepted Answer · answered May 10 '17 at 05:50

You need to do:-$("#div4html").on( "click", "#btntest", function() {

It's called:- Event Delegation

Example:-

$("#printbtn").on( "click", function() {
  $("#div4html").html('<button id ="btntest">btntest</button>');
});

$("#div4html").on( "click","#btntest", function() { 
  alert("on click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div4html">div</div><br>
<button id="printbtn">printbtn</button>

Event in jQuery .html() won't detect

3 Answers3