Wie einfache Anführungszeichen oder doppelte Anführungszeichen in jquery's append(), onclick(), alert() auf einmal zu entkommen?

Question

Ich habe eine Frage, wenn ich meine HTML mit Javascript entwickeln.

Was ich endlich in html wollen, ist:

<div id="test"> 
<div onclick="alert("it's a test.")">Show</div> 
</div> 

Aber in Code möchte ich es wie folgt realisiert werden:

<div id="test"></div> 
<script> 
var tmp="it's a test.";//be careful, there must be a single quote in this variable 
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>"); 
</script> 

In firebug es zeigt:

<div id="test"> 
<div ")'="" test.="" a="" s="" onclick="alert(" it">Show</div> 
</div> 

So Ich denke, es ist ein Fluchtproblem. Aber ich denke, es hat mindestens 3 Tiefenstufen. Kann mir jemand helfen? Vielen Dank!

Answer 1

Verwenden Sie jQuery nicht zum Schreiben von Inline-Skripten.

ersetzen

$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>"); 

mit

$('<div>').click(function(){ alert(" "+tmp+" ") }).text('Show').appendTo('#test'); 

Auf diese Weise

• Sie eval den Code nicht auf Klick
• Syntaxfehler werden erkannt direcly
• Sie nicht Zitat haben Fluchtproblem
• ist der Code besser lesbar
• Sie eine direkte Bindung haben werden, ohne nutzlosen Wähler Auflösung
• wenn Sie eine Variable benötigen (zB temp), brauchen Sie nicht es im globalen Bereich zu setzen, kann es sein im Rahmen des Elements hinaus

um Ihre Frage in Kommentar zu beantworten, können Sie entweder

• Verwendung ein Zwischenverschluss den Wert zum Zeitpunkt der Looping (example here)
einzuschließen
• oder verwenden Sie das eventData Argument von jQuery's click function.

Beispiel eventData Argument jQuery verwenden:

var names = ['A', 'B']; 
for (var i=0; i<names.length; i++) { 
    $('<div>').text('link '+(i+1)).click(names[i], function(e) { 
    alert('Name : ' + e.data); 
    }).appendTo(document.body); 
} 

Demonstration

Answer 2

Ein einfacher Weg ist, neue div auf Ihre #test dann Delegation Ereignis zu binden, verwenden Ereignis anhängen klicken für Ihre neu div hinzugefügt wie dies:

$('#test').append("<div class='newDiv'>Show</div>"); 

$('#test').on('click','.newDiv',function() { 
    alert("it's a test."); 
}); 

Answer 3

Umgekehrte Schrägstriche verwendet werden können Sonderzeichen

<div id="test"></div> 
<script> 
var tmp=\"it's a test.\";//be careful, there must be a single quote in this variable 
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>"); 
</script> 

zu entkommen, die hoffentlich funktionieren sollte, wenn es nicht sollten Sie