Escaping generierten HTML, dass onclick eine jQuery-Funktion mit CSS-Attributselektor hat

Question

Ich habe Mechanismus, der HTML in JavaScript generiert, und ich muss diesen Mechanismus erweitern, um eine Remove-Zeile hinzuzufügen.

Der Zeilenerzeugungsmechanismus sieht wie folgt aus:

debug.createOverrideRow = function (override) { 

    var rowStr = ""; 
    if (override.AutoDisplay) { 
     rowStr += "<tr session-key=\"" + override.SessionKey + "\" "; 
    } else { 
     rowStr += "<tr class=\"hide\" session-key=\"" + override.SessionKey + "\" "; 
    } 
    rowStr += "session-key-data-type=\"" + override.DataType + "\">"; 
    rowStr += "<td id=\"tdDisplayName" + i + 1 + "\">" + override.DisplayName + "</td>"; 
    rowStr += "<td id=\"tdValue" + i + 1 + "\">"; 

    switch (override.DataType) { 
     case "NullableInteger": 
     case "Integer": 
     case "rowString": 
      rowStr += "<input type=\"text\" onChange=\"common.validateField(this, " + override.ValidationPattern + ")\" onBlur=\"common.validateField(this, " + override.ValidationPattern + ")\" />"; 
      break; 
     case "Array": 
      rowStr += "<input type=\"text\"/>"; 
      break; 
     case "Date": 
      rowStr += "<input class=\"datePicker\" placeholder=\"yyyy-mm-dd\" type=\"text\" onChange=\"common.validateDate(this)\" onBlur=\"common.validateDate(this)\" />"; 
      break; 
     case "Boolean": 
      rowStr += "<input type=\"checkbox\"/>"; 
      break; 
     case "Radio": 
      var inputs = override.InputList.split(";"); 
      rowStr += "<div>"; 
      for (var j = 0; j < inputs.length; j++) { 
       var elements = inputs[j].split(":"); 
       rowStr += "<input id=\"rad" + j + "\" name=\"" + override.SessionKey + "\" type=\"radio\" value=\"" + elements[0] + "\" />&nbsp;" + elements[1] + "&nbsp;"; 
      } 
      rowStr += "</div>"; 
      break; 
    } 

    rowStr += "</td>"; 
    rowStr += "</tr>"; 
    return rowStr; 
} 

Der Mechanismus, der eine Schaltfläche Entfernen einzuspritzen soll:

debug.injectRemoveButtonIntoOverrideRow = function (override, row) { 
    $(row).find('td:last').append("<input type=\"button\" value = \"Remove\" onClick=\"$('tr[session-key=\"" + override.SessionKey + "\"]').remove();\" />"); 
} 

HTML Beispiel:

<tr session-key="data.SampleId" session-key-data-type="NullableInteger"><td id="tdDisplayName71">Sample Id</td><td id="tdValue71"><input type="text"><input type="button" value="Remove" onclick="$(" tr[session-key="data.SampleId" ]').remove();'=""></td></tr> 

Ist es möglich, den Zitaten zu entkommen, damit das funktioniert?

Answer 1

Wie pro @ Shilly Vorschlag habe ich die Wähler in eine Funktion bewegt:

debug.injectRemoveButtonIntoOverrideRow = function (override, row) { 
    var cleanedSessionKey = override.SessionKey.replace(/[^a-zA-Z0-9]/g, ""); 
    $(row).find('td:last').append("<script type=\"text/javascript\"> function remove" + cleanedSessionKey + "(){ $('tr[session-key=\"" + override.SessionKey + "\"]').remove(); }</script><input type=\"button\" value = \"Remove\" onClick=\"remove"+cleanedSessionKey+"()\" />"); 
}