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

但它不起作用。

（这是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

Answer 2

我认为您可以这样做，只需将 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 3

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

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

工作小提琴...

Answer 4

尝试使用：

见小提琴

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