Escaping quotes in jquery

Question

I'm having a bit of a problem escaping quotes in the following example:

var newId = "New Id number for this line";

$(id).html('<td><input type="text" id="my' + newId + '" onKeyUp="runFunction("#my' + newId + '");"></td>');

The issue is that when I look at the generated code the id does update to id="myNewId", but in the function call it looks like this:

onkeyup="runFunction(" #row2="" );=""

What exactly am I doing wrong?

Answer 1

You forgot to escape the attribute's quotes.

var newId = "New Id number for this line";

$(id).html('<td><input type="text" id="my' + newId + '" onKeyUp="runFunction(\'#my' + newId + '\');"></td>');

Answer 2

You should use escaped single quotes \' to surround the #my... part.

Answer 3

You need to use HTML character references for HTML attribute values. Try this:

function htmlEncode(str) {
    var map = {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"};
    return str.replace(/[&<>"']/g, function(match) { return "&" + map[match] + ";"; });
}

$(id).html('<td><input type="text" id="my' + newId + '" onKeyUp="' + htmlEncode('runFunction("#my' + newId + '");') + '"></td>');

Answer 4

Just don't put JavaScript into the HTML string:

$(id).html(
  '<td><input type="text" id="my' + newId + '"></td>'
).find("input").keyup( function() {
  runFunction("#my" + newId);
});

Thinking about it, in this special case you can exchange the keyup() function body for:

  runFunction(this);

because you seem to want to run the function on the object itself.