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

但是不起作用。

（Here is jsfiddled code）

如何实现？
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');
    });
});

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...

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

4 个答案: