Dynamically create an element with an event handler that takes a string

Question

This is driving me insane.

I create a cell in a table dynamically through:

tr.append("<td>" + countryArr[i].ISO_id + "</td>");

I created a button that when clicked calls a function with the value countryArr[i].ISO_id. This value is a string and needs to be called in "quotes".

I cannot get the function to be called with quotes.

I've tried:

tr.append("<td><button type='button' onclick='showCyclists(" + cId  + ")'>Show country's cyclists</button></td>");
tr.append("<td><button type='button' onclick='showCyclists("" + cId  + "")'>Show country's cyclists</button></td>");
tr.append("<td><button type='button' onclick='showCyclists('" + cId  + "')'>Show country's cyclists</button></td>");

None of these work. Please help

You have a syntax. You have a "" right next to each other on the middle line. — Neil, Mar 16 '17 at 19:39
Reopening this because it's an XY problem which is not addressed in any of the answers on the proposed duplicate (and the proposed duplicate is itself closed as a duplicate of another question). The solution is _not_ to cobble together a string that manages to get the job done. — JLRishe, Mar 16 '17 at 20:07

score 2 · Answer 1 · answered Mar 16 '17 at 19:40

2

With ES6 you you could just use the following called template literals, note the backticks `

tr.append(`<td><button type='button' onclick='showCyclists("${cId}")'>Show country's cyclists</button></td>`);

answered Mar 16 '17 at 19:40

E. Sundin

4,103
21
30

score 0 · Answer 2 · answered Mar 16 '17 at 19:39

0

Just add escaped quotes showCyclists(\"" + cId + "\"):

tr.append("<td><button type='button' onclick='showCyclists(\"" + cId  + "\")'>Show country's cyclists</button></td>");

answered Mar 16 '17 at 19:39

hsz

148,279
62
259
315

JLRishe · Answer 3 · 2017-03-16T20:14:29.793

You can't use single quotes because those are being used to delineate the attribute. You could use escaped double quotes to get this to work:

tr.append("<td><button type='button' onclick='showCyclists(\"" + 
          cId  + 
          "\")'>Show country's cyclists</button></td>");

However, while it is possible to get your approach to work by manipulating the strings, the solution you are trying to use here (inline event handlers, and furthermore, inline event handlers created from JavaScript strings) is a bad practice.

Save yourself some headaches and build up the elements properly. Your code might be a few lines longer, but it will be cleaner.

Good approach:

var button = $('<button type="button">')
               .text("Show country's cyclists")
               .on('click', function () { showCyclists(cId) });
var td = $('<td>').append(button);
tr.append(td);

Working example:

function showCyclists(id) {
  console.log("Here are all the cyclists.");
  console.log(id);
}

var tr = $('tr');
var cId = '12345';

var button = $('<button type="button">')
               .text("Show country's cyclists")
               .on('click', function() { showCyclists(cId); });
var td = $('<td>').append(button);
tr.append(td);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr></tr>
</table>

Dynamically create an element with an event handler that takes a string

3 Answers3