javascript 如何将参数传递给 onclick 函数参数到动态创建的按钮中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15822079/
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
How to pass parameters into onclick function parameters into dynamically created buttons?
提问by U.f.O
My javascript reads text from a file and creates button dynamically base on the button creation below. The problem I am facing is it is not able to call the function on click. I've tried removing the parameters to call it and it works however I can't seem to get it to work with passing of parameters. Can someone help me with it?
我的 javascript 从文件中读取文本并根据下面的按钮创建动态创建按钮。我面临的问题是它无法在单击时调用该函数。我已经尝试删除参数来调用它并且它可以工作，但是我似乎无法让它与参数传递一起工作。有人可以帮我吗？
JS:
JS：
function toggleVisibility(type){
alert(type);
}
Button creation:
按钮创建：
var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of '+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';
回答by Ian
You shouldn't use inline handlers, first of all, and it's easier to create it with jQuery anyways:
首先，您不应该使用内联处理程序，而且无论如何使用 jQuery 创建它更容易：
var that = this;
var button = $("<button>");
button.addClass("btn btn-block btn-inverse active");
button.attr({
type: "button",
"data-toggle": "button tooltip",
title: "Click this to enable/disable viewing of " + that
});
button.text(word);
button.on("click", function () {
toggleVisibility(that);
});
(yes, I know you could chain all of the method calls, I just wanted to do it this way)
（是的，我知道你可以链接所有的方法调用，我只是想这样做）
When you're ready to put this button somewhere, just use $container.append(button);.
当您准备好将此按钮放在某处时，只需使用$container.append(button);.
Everything depends on what thisis or what you want/expect it to be. If you need the parameter passed to toggleVisibilityto be the specific button that was just clicked (I'm guessing to toggle its visibility), just pass this(ignore the that). As for setting the titleattribute, I'm not sure what you want :)
一切都取决于this你想要/期望它是什么或什么。如果您需要将参数传递给toggleVisibility刚刚单击的特定按钮（我猜想切换其可见性），只需传递this（忽略that）。至于设置title属性，我不确定你想要什么:)
If you have an HTML structure like:
如果您有一个 HTML 结构，例如：
<div id="container">
<!-- Buttons go somewhere in here -->
</div>
And you're appending the buttons to that container (or somewhere in that container), it would be more efficient to bind a single clickhandler to the container with event delegation:
并且您将按钮附加到该容器（或该容器中的某处），click使用事件委托将单个处理程序绑定到容器会更有效：
$("#container").on("click", ".special-btn-identifier", function () {
toggleVisibility(this);
});
Of course, you'd need to add a "special-btn-identifier" class to the buttons, so that this event handler will work (and remove the individual clickhandlers for each button, as this will cover them). This single event handler only needs to run once, preferably as soon as the #containeris ready...like in $(document).ready(function () {});.
当然，您需要向按钮添加一个“special-btn-identifier”类，以便此事件处理程序可以工作（并删除click每个按钮的单独处理程序，因为这将覆盖它们）。这个单一的事件处理程序只需要运行一次，最好#container是在准备好后立即运行……就像在$(document).ready(function () {});.
回答by Nelson
Replace your following line:
替换您的以下行：
.. onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';
for this one:
对于这个：
.. onclick="toggleVisibility(this)">'+word+'</button>';
as you dont need to escape the thiskeyword, nor including a different thisfrom the context where you were creating the button text.
因为您不需要转义this关键字，也不需要包含与this创建按钮文本的上下文不同的内容。
回答by Schleis
Register the onClick event on the document instead of in the html when you create the button.
创建按钮时，在文档上而不是在 html 中注册 onClick 事件。
$(document).on('click', 'button.btn-inverse', function() { toggleVisibility(this); return false;});
回答by moonwave99
Don't create inline HTML strings, don't use intrusive Javascript.
不要创建内联 HTML 字符串，不要使用侵入性的 Javascript。
Though I don't even advise you to create them with vanilla jQuery, you may try with:
虽然我什至不建议您使用 vanilla jQuery 创建它们，但您可以尝试使用：
var $button = $('<button></button>', {
'text' : word
'type' : 'button',
'class' : 'btn btn-block btn-inverse active',
'data-toggle' : 'button tooltip',
...
// any other attributes
});
// append the $button anywere
$( someContainer ).append($button);
$( someContainer ).on('click', '.btn', function(event){
// you can refer to the button with $(this) here
});
