Set onclick handler to dynamically created button

Question

I need to create button dynamically and assign its onclick handler. Click handler could be anonymous function (I'm not sure how it is called in JS). It is allowed to jQuery.
I tried something like this:

<div>
    <button id="x">Show</button>
</div>

function magick() {
    console.log('some special magick');
}

function createButton(itsHandler) {
    var guts = '<button id="__internal" onclick="' 
        + itsHandler +    // <-- that's wrong
        '">Test</button>';
    $($.trim(guts)).appendTo('body');
}

$(document).ready(function () {
    $("#x").bind("click", function() { 
            createButton(magick);
        });
});

but is doesn't work.

(Here is jsfiddled code)

How it can be accomplished?
UPD1: It would be better if it was done inside of the createButton function.

possible duplicate of [jQuery - Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements) — Liam, Nov 15 '13 at 09:33

Rohan Kumar · Accepted Answer · 2013-11-13T09:38:25.473

13

Try to use on() like

$('body').on('click','#__internal',function(){
   console.log('test some special magick');
});

$(document).ready(function () {
    $("#x").bind("click", function() { 
       var guts = '<button id="__internal" >Test</button>';
       $($.trim(guts)).appendTo('body');
    });
});

Demo

Updated In your code, below two lines can create magic for you like,

var guts = '<button id="__internal">Test</button>';
$($.trim(guts)).appendTo('body').bind('click', magick);

Demo 1

edited Nov 13 '13 at 09:38

answered Nov 13 '13 at 07:38

Rohan Kumar

40,431
11
76
106

How it could be done inside of one function? I mean creating button and assigning handler. – Evgeny Timoshenko Nov 13 '13 at 08:18
If you are using `jquery` then it is better to use `on`. – Rohan Kumar Nov 13 '13 at 09:24
1

I can use `$('body').off('click', ...)` inside function to prevent multiple handler assignment, than use `on` to set handler again. I need it in one function because I have to separate it from ` – Evgeny Timoshenko Nov 13 '13 at 09:31
Thank you! For anyone using $(SELECTOR).click(function(){STUFF}) and finding that it works only SOME of the time. Use this instead! – Squidinker Oct 06 '16 at 10:49

score 0 · Answer 2 · answered Nov 13 '13 at 07:42

0

try using on:

see FIDDLE

 $("body").on("click", "#__internal", function(){
      alert('some special magick');
 });

answered Nov 13 '13 at 07:42

mehdi

1,755
2
15
21

score 0 · Answer 3 · edited Dec 26 '13 at 04:33

0

You may use on() for binding events on dynamically added elements. Like this:

$(document).on('click', '#__internal', function () {
 alert('some special magick');
})

WORKING FIDDLE...

edited Dec 26 '13 at 04:33

Andrew Barber

39,603
20
94
123

answered Nov 13 '13 at 08:10

Sindhu

473
6
19

score 0 · Answer 4 · answered Nov 13 '13 at 08:21

0

I think you can do it that way just make onclick value a function call like this:

var guts = '<button id="__internal" onclick="magick()">Test</button>';

But it won't work in jsfiddle, because jsfiddle put your js code in window load handler so the magick function would not be visible outside that handler.

And about your createButton function you should pass the function's name instead of the function itself, try this:

function createButton(itsHandlerName) {
    var guts = '<button id="__internal" onclick="' 
        + itsHandlerName +
        '()">Test</button>';//add () to the function's name
    $($.trim(guts)).appendTo('body');
}

$(document).ready(function () {
    $("#x").bind("click", function() { 
            createButton("magick");//pass function name
        });
});

answered Nov 13 '13 at 08:21

VahidNaderi

2,448
1
23
35

It is not appropriate way because it seems that it is not possible to attach anonymous function to handler. – Evgeny Timoshenko Nov 13 '13 at 08:25
Yes it won't work for anonymous functions so you should use jquery on method as others suggested for anonymous functions and for all, that would be a better practice, I just want to show that it can work in your magick case. – VahidNaderi Nov 13 '13 at 08:40
This will not work – mercury Jun 26 '22 at 17:38

Set onclick handler to dynamically created button

4 Answers4