Question

我很难找到通过附加功能的javascript / jquery添加按钮的正确语法。

现在我正在尝试：

list.append("<button onclick='getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults')'>ButtonTest</button>");

但它返回：

<button onclick="getFeed(" http:="" open.live.bbc.co.uk="" weather="" feeds="" en="" pa2="" 3dayforecast.rss,="" showfeedresults')'="">ButtonTest</button>

基本上，我希望能够创建

<button onclick="getFeed('http://open.live.bbc.co.uk/weather/feeds/en/B1/3dayforecast.rss', showFeedResults)" class="ui-btn-hidden">

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

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

非常感谢任何建议。

Answer 1

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

list.append("<button>ButtonTest</button>");

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>Button Test</button>");

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

list.append(button);

Answer 3

在香草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

另外，内联javascript：
即<button onclick="getFeed()">
被认为是不好的做法，可能会导致许多意想不到的问题。

Answer 4

首先使用DOM API创建元素：

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

接下来，设置其属性：

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

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

someParentElement.appendChild(button);

通过javascript / jquery添加带onclick功能的按钮

4 个答案: