I have JavaScript that outputs links (search results) but I'm having problems adding onclick in the anchor tag
var str = "<a href='#bokvisning' onclick='javascript:$(#bokvisning_content).load('http://www.akademika.no/node/"+item.link+"')'>" + item.title + "</a>";
It outputs this, which is wrong:
<a href="#bokvisning" onclick="javascript:$(#bokvisning_content).load(" http:="" www.akademika.no="" node="" link')'="">Title</a>`
Is it possible? What other options do I have?
The quick fix is the quotes, like this:
var str = "<a href='#bokvisning' onclick='javascript:$(\'#bokvisning_content\').load(\'http://www.akademika.no/node/"+item.link+"\')'>" + item.title + "</a>";
It would be better to add the click handler unobtrusively though, like this:
var anchor = $("<a/>", {href:'#bokvisning', text:item.title}).click(function() {
$("#bokvisning_content").load("http://www.akademika.no/node/"+item.link);
});
//or for older jQuery versions (<1.4):
var anchor = $("<a href='#bokvisning'></a>").text(item.title).click(function() {
$("#bokvisning_content").load("http://www.akademika.no/node/"+item.link);
});
Then append that to whatever element you're currently putting the string in.
Note: The second option above assumes jQuery is an option because your onclick is using it.
item.title is user-supplied). I suggest using the $('<a href="#bokvisning">', {text: item.title})... shortcut to avoid this.
html, document overload instead of html, props. I'd never noticed this, as I've always set every attribute from props like in your example. Oh dear! I wish jQuery didn't try to shoehorn everything into one $() property, this kind of value-level overloading is crazy!You have to properly escape the quotes:
var str = "<a href='#bokvisning' onclick='javascript:$(#bokvisning_content).load('http://www.akademika.no/node/"+item.link+"')'>" + item.title + "</a>";
I've replaced two apostrophes with ' inside your string.
Also, don't you mean $('#bokvisning_content').load ..., which would give us:
var str = "<a href='#bokvisning' onclick='javascript:$('#bokvisning_content').load('http://www.akademika.no/node/"+item.link+"')'>" + item.title + "</a>";
All in all, using @Nick Craver's solution to untangle the multiple layers of quoting might be best.
