javascript 将 onclick 处理程序设置为动态创建的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19948006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set onclick handler to dynamically created button
提问by Evgeny Timoshenko
I need to create button dynamically and assign its onclickhandler. 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:
我需要动态创建按钮并分配其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);
});
});
but is doesn't work.
但这是行不通的。
How it can be accomplished?
UPD1: It would be better if it was done inside of the createButtonfunction.
如何实现？
UPD1：如果在createButton函数内部完成会更好。
回答by Rohan Kumar
Try to use on()like
尝试使用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');
});
});
UpdatedIn your code, below two linescan create magicfor you like,
更新在你的代码中，下面two lines可以create magic为你喜欢，
var guts = '<button id="__internal">Test</button>';
$($.trim(guts)).appendTo('body').bind('click', magick);
回答by mehdi
回答by Sindhu
You may use on() for binding events on dynamically added elements. Like this:
您可以使用 on() 在动态添加的元素上绑定事件。像这样：
$(document).on('click', '#__internal', function () {
alert('some special magick');
})
回答by VahidNaderi
I think you can do it that way just make onclick value a function call like this:
我认为你可以这样做，只需让 onclick 值成为这样的函数调用：
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.
但它不会在 jsfiddle 中工作，因为 jsfiddle 将您的 js 代码放在窗口加载处理程序中，因此在该处理程序之外，magick 函数将不可见。
And about your createButton function you should pass the function's name instead of the function itself, try this:
关于你的 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
});
});
