通过 javascript/jquery 添加一个带有 onclick 功能的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16177458/
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
Adding a button, with onclick function, via javascript/jquery
提问by Shuma
I'm struggling to find the correct syntax for adding a button via javascript/jquery that has a function attached.
我正在努力寻找通过附加了函数的 javascript/jquery 添加按钮的正确语法。
Right now I am trying:
现在我正在尝试：
list.append("<button onclick='getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults')'>ButtonTest</button>");
But it returns:
但它返回：
<button onclick="getFeed(" http:="" open.live.bbc.co.uk="" weather="" feeds="" en="" pa2="" 3dayforecast.rss,="" showfeedresults')'="">ButtonTest</button>
Essentially, I want to be able to create
本质上，我希望能够创建
<button onclick="getFeed('http://open.live.bbc.co.uk/weather/feeds/en/B1/3dayforecast.rss', showFeedResults)" class="ui-btn-hidden">
In javascript, But can't figure out how..`
在javascript中，但不知道如何......`
And I seem to be having trouble wrapping my head around creating html elements that use both single and double qoutation marks.
而且我似乎在创建同时使用单引号和双引号的 html 元素时遇到了麻烦。
Any advice would be greatly appreciated.
任何建议将不胜感激。
回答by Roko C. Buljan
list.append("<button>ButtonTest</button>");
list.on("click", "button", function(){
getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults');
});
For dynamically generated elements use .on()method like above.
对于动态生成的元素，请使用.on()上述方法。
回答by meagar
While I think using an onhandler on the entire list is better, it's also perfectly acceptable to just bind events to disconnected DOM elements before adding them to the DOM:
虽然我认为on在整个列表上使用处理程序更好，但在将事件添加到 DOM 之前将事件绑定到断开连接的 DOM 元素也是完全可以接受的：
button = $("<button>Button Test</button>");
button.click(function () {
getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults');
});
list.append(button);
回答by Xotic750
Something like this in vanilla javascript
在vanilla javascript中是这样的
<div id="something"></div>
var something = document.getElementById("something");
var button = document.createElement("button");
function doSomething() {
alert("hi");
}
button.id = "myButton";
button.textContent = "Click me";
button.addEventListener("click", doSomething, false);
something.appendChild(button);
on jsfiddle
Also, inline javascript:
i.e. <button onclick="getFeed()">
is considered bad practice and can cause a number of unexpected issues.
此外，内联 javascript:
ie<button onclick="getFeed()">
被认为是不好的做法，可能会导致许多意外问题。
回答by Rick Viscomi
First create the element using the DOM APIs:
首先使用 DOM API 创建元素：
var button = document.createElement('button');
Next, set its attributes:
接下来，设置其属性：
button.addEventListener('click', function (e) {...});
button.appendChild(document.createTextNode('Button Test'));
Finally, add it to the document:
最后，将其添加到文档中：
someParentElement.appendChild(button);
