将 onclick 处理程序设置为动态创建的按钮

Question

我需要动态创建按钮并分配其onclick 处理程序。点击处理程序可能是匿名函数（我不确定它是如何在 JS 中调用的）。允许jQuery.
我试过这样的事情：

<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);
        });
});

但它不起作用。

(Here is jsfiddled code)

如何实现？
UPD1：如果能做到就更好了在createButton 函数内部。

Answer 1

尝试使用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

更新在你的代码下面two lines可以create magic为你喜欢，

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

Demo 1

Answer 2

尝试使用开启：

见FIDDLE

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

Answer 3

我认为您可以这样做，只需将 onclick 值设为这样的函数调用：

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

但它在 jsfiddle 中不起作用，因为 jsfiddle 将您的 js 代码放在窗口加载处理程序中，因此在该处理程序之外不会看到 magick 函数。

关于你的 createButton 函数，你应该传递函数的名称而不是函数本身，试试这个：

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
        });
});

Answer 4

您可以使用 on() 在动态添加的元素上绑定事件。像这样：

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

WORKING FIDDLE...