CODEWITHSUNDEEP
javascriptjquery
JavaCake
JavaCake

Reputation: 4115

Quotes not turning out as they should while appending with jQuery

I am trying to execute a function via onclick, but the appended links are not containing the correct quotes and random signs are added.

$('#ip_list').append("<li><a onclick='setIP('" +  ip + "')'>" + ip + "<span class='glyphicon glyphicon-plus pull-right'></span></a></li>");

Turns out as following in Chrome Tools:

<a onclick="setIP(" 192.168.1.129')'="">192.168.1.129<span class="glyphicon glyphicon-plus pull-right"></span></a>

Where does the double quote come from where i simply used single quotes around the IP-address?

Upvotes: 1

Views: 56

Answers (6)

R Lam
R Lam

Reputation: 393

Try this one 

$('#ip_list').append("<li><a onclick=setIP('" +  ip + "')>" + ip + "<span class='glyphicon glyphicon-plus pull-right'></span></a></li>");

https://jsfiddle.net/fh1gt4tz/

or on this way

$('#ip_list').append("<li><a onclick=\"setIP('" +  ip + "')\">" + ip + "<span class='glyphicon glyphicon-plus pull-right'></span></a></li>");

https://jsfiddle.net/oqt00d4z/

Upvotes: 0

Barmar
Barmar

Reputation: 780974

You can't use the same type of quotes inside the onclick attribute as you use to delimit the attribute value, because they'll end the attribute. If you use double quotes around the attribute, use single quotes inside, and vice versa:

$('#ip_list').append("<li><a onclick='setIP(\"" +  ip + "\")'>" + ip + "<span class='glyphicon glyphicon-plus pull-right'></span></a></li>");

A better solution would be to use jQuery to bind the click handler in one place, rather than inline Javascript:

$("#ip_list").on("click", "li a", function() {
    setIP($(this).text());
});

Upvotes: 1

ilter
ilter

Reputation: 4079

@R Lam's suggestion works as the fiddle shows. If you really need to write the quotes around the function name like onclick="setIP('xxx.xxx.xxx.xxx')" then you should write your code like this:

$('#ip_list').
    append("<li><a onclick=\"setIP('" +  ip + "')\">" + ip + 
    "<span class='glyphicon glyphicon-plus pull-right'></span></a></li>");

Upvotes: 0

phuzi
phuzi

Reputation: 13060

Weird, but it looks a bit messy with all those double and single quotes flying around.

It helps to rewrite the code to this to avoid confusion

$('<li>').append(
    $('<a>', { onclick: 'setIP(' +  ip + ')', text: ip})
).appendTo($('#ip_list'));

Much easier to read, no 'quotes within quotes' and you can see what is going on.

Upvotes: 0

Matt
Matt

Reputation: 75317

It's because your quotes (to mark the start and end of the attribute) are conflicting with your quotes to mark the JavaScript string literal inside the attribute.

The easiest way to fix this would be:

$('#ip_list').append("<li><a onclick=\"setIP('" +  ip + "')\">" + ip + "<span class='glyphicon glyphicon-plus pull-right'></span></a></li>");

... which uses " to mark the start and end of the attributes, and ' to mark the JavaScript string literals. Note we've had to use \ to escape the " used for the attributes (since that's also used to denote the whole string passed to append()). You'll find this works; http://jsfiddle.net/1yott86L/

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

Remove the ' from setIP('" as there is a mismatch of attribute quotes '' and quotes from the function append("")

$('#ip_list').append('<li><a onclick="setIP(\'' + ip + '\')">' + ip + '<span class="glyphicon glyphicon-plus pull-right"></span></a></li>');

or as TrueBlueAussie suggested use "" for attributes but anyways browser itself converts them.

Output:

<a onclick="setIP('188.87.76.21')">188.87.76.21<span class="glyphicon glyphicon-plus pull-right"></span></a>

Upvotes: 0

Related Questions