Append html with javascript string

Question

Im trying to append html with a javascript string, but having some troubles with the single quotes.

Appending the element works this far:

$("<a class='action-button' id='pl65197buy' value='buy now'>Bekijk aanbieding</a>").prependTo("div#centerplist");

But when I try to add an onclick function it wont work - do i need to escape the quotes somehow?

onclick="buy(this, 65197, null, 'pl65197qty",null, '/ajax/buy'

This is obviously wrong but its the closest i get without an error in the console:

$("<a class='action-button' id='pl65197buy' value='buy now' onclick='buy(this, 65197, null, 'pl65197qty',null, '/ajax/buy'>Bekijk aanbieding</a>").prependTo("div#centerplist");

Why the onclick and not an event handler in your javascript code? — Kilian Stinson
– Kilian Stinson, Commented Sep 21, 2016 at 7:51

Medeni Baykal · Accepted Answer · 2016-09-21 07:50:11Z

1

You need to escape your quotes using the \ character. Try this

$("<a class='action-button' id='pl65197buy' value='buy now' onclick=\"buy(this, 65197, null, 'pl65197qty',null, '/ajax/buy')\">Bekijk aanbieding</a>").prependTo("div#centerplist");

edited Sep 21, 2016 at 7:50

Medeni Baykal

4,3331 gold badge30 silver badges36 bronze badges

answered Sep 21, 2016 at 7:45

Jay Ghosh

6846 silver badges26 bronze badges

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

1 Comment

Jay Ghosh Over a year ago

Really? Just to remove a "yes"?

Kilian Stinson · Accepted Answer · 2016-09-21 08:21:56Z

I'd suggest a slightly different approach using an event handler in your javascript. This way its both easier to read and maintain.

$("<a class='action-button' data-id='165197' id='pl65197buy' value='buy now' >Bekijk aanbieding</a>").prependTo("div#centerplist");

$(document).on("click",".action-button",function() {
    // your buy() function 
    // $(this) contains your pressed button information
    buy($(this)[0], $(this).data('id'), null, 'p' + $(this).data('id') + 'qty', null, '/ajax/buy')
});

You're able to access the data-id attribute with $(this).data('id') for example.

EDIT: I've included your buy function, I wasn't if p+id+qty is generic or not, though I think you get how it works in general.

Hmm thats interesting. unsure how to write the function though
Edited my answer. Is it clearer now how I'd write the function inside the event handler?

suyesh · Accepted Answer · 2016-09-21 07:47:14Z

0

$("<a class='action-button' id='pl65197buy' value='buy now' onclick=\"buy(this, 65197, null, 'pl65197qty',null, '/ajax/buy')\">Bekijk aanbieding</a>").prependTo("div#centerplist");

Try this

answered Sep 21, 2016 at 7:47

suyesh

6591 gold badge10 silver badges19 bronze badges

Comments

Siby Thomas · Accepted Answer · 2016-09-21 10:09:41Z

Try this.

<html>
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<body> 
<div id="centerplist">
</div>
<script>
$(document).ready(function()
{
$("#centerplist").prepend("<a class='action-button' id='pl65197buy' value='buy now' onclick='buy(this, 65197, null,\"pl65197qty\",null, \"/ajax/buy\")'>Bekijk aanbieding</a>");
});

function buy(p1,p2,p3,p4,p5,p6)
{
alert(p2);
}
</script>
</body> 
</html>

Collectives™ on Stack Overflow

Append html with javascript string

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Related