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

Question

我需要动态创建按钮并分配其onclick处理程序.Click handler可以是匿名函数(我不确定它是如何在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);
        });
});

但是不起作用.

(这是jsfiddled代码)

如何实现？
UPD1:如果在createButton函数内完成它会更好.

Answer 1

尝试使用on()之类的

$('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');
    });
}); 

演示

更新在您的代码中,下面two lines可以create magic为您所喜欢,

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

演示1