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

Question

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.

The following answers are better solution, but your problem can be solved by using escaped quote like this var text = "aaa\"bb"; — Zdeněk Mlčoch
– Zdeněk Mlčoch, Commented Apr 23, 2013 at 19:30

Roko C. Buljan · Accepted Answer · 2021-06-01 07:35:40Z

9

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.

edited Jun 1, 2021 at 7:35

answered Apr 23, 2013 at 19:18

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ian Over a year ago

Might want to make it more definitive that on should only be called once, outside of this code/loop

plalx Over a year ago

@roXon, What tells you that there's a single button in that list? You should explain what's the difference between attaching the handler on the parent using a delagating approach and attach the handler directly on the element. Also, on is not only for dynamically created elements, but is a best practice all the time... onclick="" should not be used at all.

Ian Over a year ago

@plalx "is a best practice all the time" - that's not true. There are plenty of arguments either way.

Roko C. Buljan Over a year ago

@plalx to add to your comment - adding an ID to the button and referencing to that ID inside the .on element delegation should be best, but I think that would be quite easy for the OP to figure that out. If you do that job, some things are sometimes self explanatory. If you know the job. Still waiting for an OP comment to see how to improve for his exact needs. (If needed).

plalx Over a year ago

@Ian, do you have an example where onclick="" is prefered?

Community · Accepted Answer · 2017-05-23 12:08:47Z

6

While I think using an on handler on the entire list is better, it's also perfectly acceptable to just bind events to disconnected DOM elements before adding them to the 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);

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Apr 23, 2013 at 19:20

user229044♦

241k41 gold badges347 silver badges350 bronze badges

1 Comment

Ian Over a year ago

While it's acceptable, it doesn't mean it should be suggested (not saying this should or shouldn't be suggested, but it makes most sense to use event delegation here). And it would make more sense if you declared the handler function once and referenced it, and used button.on("click", handler);, otherwise, a new anonymous function is created/referenced each time.

Xotic750 · Accepted Answer · 2013-04-23 19:30:58Z

2

Something like this in vanilla 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);

on jsfiddle

Also, inline javascript:
i.e. <button onclick="getFeed()">
is considered bad practice and can cause a number of unexpected issues.

edited Apr 23, 2013 at 19:30

answered Apr 23, 2013 at 19:24

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

Comments

Rick Viscomi · Accepted Answer · 2013-04-23 19:25:41Z

0

First create the element using the DOM APIs:

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

Next, set its attributes:

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

Finally, add it to the document:

someParentElement.appendChild(button);

edited Apr 23, 2013 at 19:25

answered Apr 23, 2013 at 19:20

Rick Viscomi

8,9224 gold badges42 silver badges57 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Append a button with click event listener assigned

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Append a button with click event listener assigned

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related