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

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

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

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