通过javascript/jquery添加一个带有onclick函数的按钮

我很努力地找到正确的语法来添加一个通过javascript/jquery添加一个具有附加功能的按钮。通过javascript/jquery添加一个带有onclick函数的按钮

现在我想：

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中，但可以”不知道如何......'

而且我似乎在创建使用单个和双个qoutation标记的html元素时都遇到了麻烦。

任何意见将不胜感激。

来源

2013-04-23 Shuma

下面的答案是更好的解决方案，但你的问题可以通过使用转义引号像这样的VAR文本=“AAA \” BB“来解决; – 2013-04-23 19:30:22

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()方法等的上方。

来源

2013-04-23 19:18:16

可能要使它更明确的说'on'应该只被调用一次，在这个代码/循环之外 – Ian 2013-04-23 19:24:30

@roXon，是什么告诉你该列表中有一个按钮？你应该解释使用延迟方法在父级附加处理程序和直接附加处理程序之间的区别。 'on'不仅适用于动态创建的元素，而且始终是最佳实践...''onclick =“”'根本不应该使用。 – plalx 2013-04-23 19:31:31

@plalx“始终是最佳实践” - 这不是true。无论哪种方式都有很多参数 – Ian 2013-04-23 19:34:30

首先创建一个使用DOM API的元素：

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

接下来，设置其属性：

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

最后，它添加到文档：

someParentElement.appendChild(button);

来源

2013-04-23 19:20:14

虽然我认为在整个列表上使用on处理程序更好，也可以完全接受只是绑定e通风口断开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);

来源

2013-04-23 19:20:17 meagar

尽管这是可以接受的，但并不意味着它应该被建议（并不是说**这个**应该或不应该被建议，但是在这里使用事件委托最有意义）。如果你声明处理函数并引用它，并且使用'button.on（“click”，handler）;'，否则每次创建/引用一个新的匿名函数会更有意义。 – Ian 2013-04-23 19:26:58

像这样的事情在香草的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);

上jsfiddle

此外，内联JavaScript：
即<button onclick="getFeed()">
是认为不好的做法，可能会导致一些意想不到的问题。

来源

2013-04-23 19:24:11 Xotic750

通过javascript/jquery添加一个带有onclick函数的按钮

回答

相关问题