Zufälliges Anführungszeichen, das in generierten onclick html-Parameter eingefügt wird

Question

Ich versuche, Parameter zu einer onclick-Funktion beim Generieren von HTML via Javascript hinzuzufügen. Wenn ich den Code inspiziere, setzt er ein Anführungszeichen in den Parameter der onclick-Funktion.

 var lengthOfCats = ArrayOfCategories.length; 
    for (var a = 0; a < lengthOfCats; a++) { 
    $("#CatTable").append("<div class='better-table-cell'>" + ArrayOfCategories[a].Name + "</div>\ 
          <div class='better-table-cell'>" + ArrayOfCategories[a].DepartmentName + "</div>\ 
          <div class='better-table-cell'>" + ArrayOfCategories[a].Active + "</div>\ 
          <div class='better-table-cell'>\ 
           <button onclick=OpenUpdateCat(" + ArrayOfCategories[a].CategoryID + "," + ArrayOfCategories[a].Name + ");" + ">Edit</button>\ 
          </div>"); 

Hier ist ein Bild des HTML, das für die Bearbeitungsschaltfläche generiert wird.

Answer 1

Der Browser normalisiert den HTML-Code und setzt Anführungszeichen um den Attributwert.

Das Problem ist, dass der Attributwert in der Mitte des JavaScript endet, da der Attributwert Leerzeichen enthält und Sie die Anführungszeichen nicht an den richtigen Stellen selbst platziert haben.

Das nächste Bit von JS wird dann als neues Attribut behandelt.

---

Das Zusammenführen von Strings zum Generieren von HTML ist grundsätzlich eine schlechte Idee. Es ist schwer, sicherzustellen, dass alle richtigen Dinge zitiert und gemieden werden.

Verwenden Sie DOM, um stattdessen Ihr HTML zu generieren.

Es ist ein wenig länger, aber auf lange Sicht klarer und einfacher zu pflegen.

var $cat_table = $("#CatTable"); 
var lengthOfCats = ArrayOfCategories.length; 
for (var a = 0; a < lengthOfCats; a++) { 
    $cat_table.append(
     $("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Name) 
    ); 
    $cat_table.append(
     $("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].DepartmentName) 
    ); 
    $cat_table.append(
     $("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Active) 
    ); 
    $cat_table.append(
     $("<div />").addClass("better-table-cell").append(
      $("<button />").text("Edit").on("click", generate_edit_handler(ArrayOfCategories[a].CategoryID, ArrayOfCategories[a].Name)) 
     ) 
    ); 
} 

function generate_edit_handler(cat_id, name) { 
    return function() { 
     OpenUpdateCat(cat_id, name); 
    }; 
}