通过javascript / jquery添加带onclickfunction的按钮

我正在努力找到通过附加function的javascript / jquery添加按钮的正确语法。

现在我正在努力：

list.append("ButtonTest"); 

但它返回：

 ButtonTest 

从本质上讲，我希望能够创造

在javascript中，但无法弄清楚如何……`

而且我似乎无法绕过创建使用单个和双重qoutation标记的html元素。

任何建议将不胜感激。

Answer 1

http://api.jquery.com/on/

 list.append("ButtonTest"); list.on("click", "button", function(){ getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults'); }); 

对于动态生成的元素，使用.on()方法。

Answer 2

虽然我认为在整个列表中使用on处理程序更好，但在将事件添加到DOM之前将事件绑定到断开连接的DOM元素也是完全可以接受的：

 button = $("Button Test"); button.click(function () { getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults'); }); list.append(button); 

Answer 3

在vanilla javascript中有类似的东西

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

在jsfiddle

另外，内联javascript：
即
被认为是不好的做法，可能会导致一些意想不到的问题。

Answer 4

首先使用DOM API创建元素：

 var button = document.createElement('button'); 

接下来，设置其属性：

 button.addEventListener('click', function (e) {...}); button.appendChild(document.createTextNode('Button Test')); 

最后，将其添加到文档中：

 someParentElement.appendChild(button);