digamos que tengo datos como este
--------------- ID | Data --------------- 1 | ABCDEFG //normal 2 | ABCD'EFG // single quotes only 3 | AB'CDE'FG // mutiple single quotes only 4 | ABCD"EFG // double quotes only 5 | AB"CD"EFG // mutiple double quotes only 6 | ABCD"EFG // double quotes only 7 | ABCD`EFG // backtick only 8 | AB`CD`EFG // mutiple backtick only 9 | AB'C"DE`FG // mixing 10 | A"B'C"D'E`F`G // mutiple mixing¿Cuál es la mejor práctica para evitar errores cuando se encuentran con comillas dinámicas como esa dentro de la función onclick?
let htm +=` <button onclick="myFunction('` + val1 + `','` + val2 + `','` + val3 + `',.....etc)"></button> `;ejemplo
let val1 = data[0]; // data from ID 1 onclick="myFunction('` + val1 + `')"; // this will be work fine let val1 = data[1]; // data from ID 2 onclick="myFunction('` + val1 + `')"; // this will be errory etc..
si los datos son estáticos, puedo manejarlos como
let val1 = data[1]; // data from ID 2 onclick='myFunction("` + val1 + `")'; // this will be work fineesto los fragmentos te hacen fácil de entender
let htm = ''; let val1 = 'ABCDEFG'; // try to change val1 with another val // ABCDEFG // ABCD'EFG // AB'CDE'FG // ABCD"EFG // AB"CD"EFG // ABCD"EFG // ABCD`EFG // AB`CD`EFG // AB'C"DE`FG // A"B'C"D'E`F`G htm +=` <button onclick="myFunction('` + val1 + `')">MY BUTTON</button> `; $(function(){ $("#btn1").html(htm); }); function myFunction(val){ $("#case1").text(val); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="btn1"></div> <div id="case1">click the button</div>Simplemente no cree cadenas HTML. En su lugar, cree elementos y agregue detectores de eventos .
// fake "fetch", this is just for the demo const fetch=async()=>({json:async()=>[{id:1,data:`ABCDEFG`},{id:2,data:`ABCD'EFG`},{id:3,data:`AB'CDE'FG`},{id:4,data:`ABCD"EFG`},{id:5,data:`AB"CD"EFG`},{id:6,data:`ABCD"EFG`},{id:7,data:`ABCD\`EFG`},{id:8,data:`AB\`CD\`EFG`},{id:9,data:`AB'C"DE\`FG`},{id:10,data:`A"B'C"D'E\`F\`G`}]}) const out = document.getElementById("case1") const buttons = document.getElementById("btn1") // register a delegated event listener buttons.addEventListener("click", e => { const button = e.target.closest("button[data-value]") if (button) { out.textContent = button.dataset.value } }) // get your data fetch("https://example.com") .then(res => res.json()) .then(results => { // now create the buttons buttons.append(...results.map(({ id, data }) => { const button = document.createElement("button") button.type = "button" button.append("MY BUTTON") button.dataset.value = data // register the value as a data attribute return button })) }) <div id="btn1"></div> <div id="case1">click the button</div>Ya que ahora ha etiquetado esto con jquery , aquí hay una alternativa. Mismos conceptos, solo menos código (si ignora los ~ 80 KB de jQuery)
const out = $("#out") const buttons = $("#btn1").on("click", "button[data-value]", function() { out.text(this.dataset.value) }) $.getJSON("https://example.com").done(results => { buttons.append(results.map(({ id, data }) => $("<button>", { type: "button", text: "MY BUTTON", "data-value": data }))) })