Question

61

Adding a button, with onclick function, via javascript/jquery

rated 0 times [ 66] [ 5] / answers: 1 / hits: 18900 / 11 Years ago, tue, april 23, 2013, 12:00:00

I'm struggling to find the correct syntax for adding a button via javascript/jquery that has a function attached.

Right now I am trying:

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

But it returns:

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

Essentially, I want to be able to create

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

In javascript, But can't figure out how..`

And I seem to be having trouble wrapping my head around creating html elements that use both single and double qoutation marks.

Any advice would be greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anthonyw

Add To Favorites

Follow

Total Points: 589

Total Questions: 117

Total Answers: 117

Location: Dominican Republic

Member since Sun, Sep 4, 2022

2 Years ago

answered 11 Years ago haden · Accepted Answer

Append a button with click event listener assigned

Using pure 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);

Or using the jQuery library

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');

});

For dynamically generated elements use .on() method like above.