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

通过javascript/jquery添加带有onclick函数的按钮,javascript,jquery,button,Javascript,Jquery,Button,我正在努力找到通过javascript/jquery添加按钮的正确语法,该按钮附带了一个函数 现在我正在尝试: list.append("<button onclick='getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults')'>ButtonTest</button>"); list.append(“按钮测试”); 但它的回报是: <

我正在努力找到通过javascript/jquery添加按钮的正确语法,该按钮附带了一个函数

现在我正在尝试:

list.append("<button onclick='getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults')'>ButtonTest</button>");
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/B1/3dayforecast.rss', showFeedResults)" class="ui-btn-hidden">

在javascript中,但不知道如何`

我似乎在创建同时使用单和双QOUTING标记的html元素时遇到了麻烦

如果您有任何建议,我们将不胜感激。

附加一个指定了click event listener的按钮 使用纯JavaScript

constnewel=(标记,属性)=>Object.assign(document.createElement(标记,属性));
//使用类似于:
const EL_btn=NewEL(“按钮”{
文本内容:“测试按钮”,
onclick(){console.log(this);/*getFeed etc...*/},
});

文件.正文.附件(EL_btn)首先使用DOM API创建元素:

var button = document.createElement('button');
接下来,设置其属性:

button.addEventListener('click', function (e) {...});
button.appendChild(document.createTextNode('Button Test'));
最后,将其添加到文档中:

someParentElement.appendChild(button);
虽然我认为在整个列表上使用处理程序更好,但在将事件添加到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);
button=$(“按钮测试”);
按钮。单击(函数(){
getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss,showFeedResults');
});
列表。追加(按钮);

类似于香草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);

var something=document.getElementById(“something”);
var button=document.createElement(“按钮”);
函数doSomething(){
警报(“hi”);
}
button.id=“myButton”;
button.textContent=“单击我”;
按钮。addEventListener(“单击”,doSomething,false);
某物。附属物(按钮);

另外,内联javascript:
i、 e.


被认为是错误的做法,可能会导致许多意外问题。

可能希望更明确地规定,在该代码之外,只能调用一次
上的
/loop@roXon,是什么告诉你列表中只有一个按钮?您应该解释使用delagating方法在父级上附加处理程序与直接在元素上附加处理程序之间的区别。而且,
上的
不仅适用于动态创建的元素,而且始终是最佳实践
onclick=”“
完全不应该使用。@plalx“一直是最佳实践”-这不是真的。无论哪种方式,都有大量的参数。@plalx要添加到您的注释中-向按钮添加一个ID,并在
元素委托中引用该ID。on
应该是最好的,但我认为这对于OP来说是很容易理解的。如果你做那份工作,有些事情有时是不言自明的。如果你知道这份工作。仍在等待OP的评论,看看如何改进以满足他的确切需求。(如果需要)。@Ian,您是否有一个首选
onclick=“
”的示例?虽然这是可以接受的,但并不意味着应该建议(不是说应该或不应该建议,但在这里使用事件委派最有意义)。如果您声明一次处理程序函数并引用它,然后使用
按钮(“单击”,处理程序),这将更有意义,否则,每次都会创建/引用一个新的匿名函数。下面的答案是更好的解决方案,但您的问题可以通过使用类似于var text=“aaa\”bb”的转义引号来解决;