通过 javascript/jquery 添加一个带有 onclick 功能的按钮答案

【问题标题】：Adding a button, with onclick function, via javascript/jquery通过 javascript/jquery 添加一个带有 onclick 功能的按钮
【发布时间】：2013-04-23 19:16:50
【问题描述】：

我正在努力寻找正确的语法来通过带有附加功能的 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 元素时遇到了麻烦。

任何建议将不胜感激。

【问题讨论】：

以下答案是更好的解决方案，但您的问题可以通过使用转义引号来解决，例如 var text = "aaa\"bb";

标签： javascript jquery button

【解决方案1】：

添加一个分配了点击事件监听器的按钮

使用纯 JavaScript

const NewEL = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Use like:
const EL_btn = NewEL("button", {
  textContent: "Test button",
  onclick() { console.log(this); /* getFeed etc... */ },
});

document.body.append(EL_btn);

或者使用 jQuery 库

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

【讨论】：

可能想让on 在此代码/循环之外只被调用一次更加明确
@roXon，是什么告诉您该列表中有一个按钮？您应该解释使用 delaating 方法将处理程序附加到父级和直接将处理程序附加到元素上的区别。此外，on 不仅适用于动态创建的元素，而且始终是最佳实践……根本不应该使用onclick=""。
@plalx“一直是最佳实践”——这不是真的。无论哪种方式都有很多论据。
@plalx 添加到您的评论中 - 向按钮添加 ID 并在 .on 元素委托 中引用该 ID 应该是最好的，但我认为这会OP很容易弄清楚这一点。如果你做这项工作，有些事情有时是不言自明的。如果你知道这份工作。仍在等待 OP 评论，看看如何针对他的确切需求进行改进。（如果需要）。
@Ian，你有首选onclick="" 的例子吗？

【解决方案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);

【讨论】：

虽然可以接受，但这并不意味着应该建议它（不是说应该或不应该建议 this，但在这里使用事件委托最有意义)。如果你声明一次处理函数并引用它，并使用button.on("click", handler);，那会更有意义，否则，每次都会创建/引用一个新的匿名函数。

【解决方案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);

在jsfiddle

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

【讨论】：

【解决方案4】：

首先使用 DOM API 创建元素：

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

接下来，设置它的属性：

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

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

someParentElement.appendChild(button);

【讨论】：