Jquery event not firing for a button created in javascript with innerHTML [duplicate]

Question

I search around the web but cant do this work..

Im creating a dialog in a js.file . In this js i have a function that creates a button, but with innerHTML...

    var divButtons = document.getElementById('buttons_insert1');    
    var buttons_insert = "<button id='okcad' class='button_ok' value='' > <img src='/php/Images/OK.png' alt='OK' /> OK </button>";
    divButtons.innerHTML = divButtons.innerHTML + buttons_insert;

and in the index.html i have a jquery function to get the click event.

$("#okcad1").click(function() 
{
   alert('hello world');
}

but this is not working..the event dont fire...

Someone could help me?

Regards!

Rafael S.

Sudharsan S · Accepted Answer · 2014-12-05 13:21:33Z

5

Use event delegation

$(document).on("click" , "#buttons_insert1 #okcad1" , function() 
{
   alert('hello world');
});

answered Dec 5, 2014 at 13:21

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

3 Comments

Sudharsan S Over a year ago

@downvoters care to comment

Rafael Spessotto Over a year ago

Thanks Amit and JqueryKing! But only the JQueryKing answer worked...can u tell me why? Thanks!

ouflak Over a year ago

Thanks for this. I used the javascript equivalent and it worked perfect. Rafael, I suspect that Amit's answer is assigning the event to the wrong element.

Amit Joki · Accepted Answer · 2014-12-05 13:20:57Z

2

You need event-delegation, since you're appending it after DOM has been loaded. For that use jQuery.on

$("#buttons_insert1").on('click', '#okcad1', function() {
   alert('hello world');
}

Just click will bind the event to the elements which were present in the DOM when the code got executed, so you need the technique of event-delegation.

answered Dec 5, 2014 at 13:20

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Collectives™ on Stack Overflow

Jquery event not firing for a button created in javascript with innerHTML [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related