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

1

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.

edited Sep 21, 2016 at 8:21

answered Sep 21, 2016 at 7:57

Kilian Stinson

2,40430 silver badges33 bronze badges

2 Comments

Xeptor Over a year ago

Hmm thats interesting. unsure how to write the function though

Kilian Stinson Over a year ago

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

0

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>

answered Sep 21, 2016 at 10:09

Siby Thomas

814 bronze badges

Collectives™ on Stack Overflow

Append html with javascript string

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related