How to execute javascript methods generated in html onlclick events

Question

The updateValue() method isn't firing and I'm not sure how to even debug this using the browser.

function generateHtmlTableRow() {
    var tr = $("<tr></tr>");
    $("#results").append(tr);

    var someTextData = "test";
    tr.append("<td><input type=\"button\" value=\"TestButton\" onclick=\"updateValue(someTextData);\" /></td>");
}

function updateValue(newText) {
    alert(newText);
}

Don't use inline JavaScript for your event handler. Use jQuery's .on() function with event delegation. — j08691
– j08691, Commented Mar 16, 2016 at 17:11
Also, if you use single quotes to wrap your string, no need to escape the double quotes. — Andy
– Andy, Commented Mar 16, 2016 at 17:12
Try this.. tr.append("<td><input type=\"button\" value=\"TestButton\" onclick=\"updateValue('"+someTextData+"');\" /></td>"); — NewToJS
– NewToJS, Commented Mar 16, 2016 at 17:13

Meiko Rachimow · Accepted Answer · 2016-03-16 17:14:59Z

1

The generated html is the problem. It cannot reference a variable in the scope of the generateHtmlTableRow function. So it will work:

function generateHtmlTableRow() {
    var tr = $("<tr></tr>");
    $("#results").append(tr);

    var someTextData = "test";
    tr.append("<td><input type=\"button\" value=\"TestButton\" onclick=\"updateValue('" + someTextData + "');\" /></td>");
}

function updateValue(newText) {
    alert(newText);
}

$(document).ready(function(){
  console.log('log');
  generateHtmlTableRow();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>

answered Mar 16, 2016 at 17:14

Meiko Rachimow

4,7642 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomalak Over a year ago

This a bad example of solving such a problem, this is not how it should be done.

user3953989 Over a year ago

Thanks, I knew my syntax was off somehow!

Tomalak · Accepted Answer · 2016-03-16 17:41:06Z

1

An elegant way to do this is to

Store the someData values in HTML5 data- attributes when you create the <tr>. jQuery has the .data() function for this purpose.
Use a delegated event handler that catches all button clicks inside the <table>. The event handler can then retrieve the data again easily.

function generateTableRow(someData) {
  $("<tr><td><button class='test'>TestButton</button></td></tr>")
    .data("value", someData)
    .appendTo("#results");
}

$(function(){
  $("#results").on("click", "button.test", function () {
    var value = $(this).closest("tr").data("value");
    alert(value);
  });
  generateTableRow("test 1");
  generateTableRow("test 2");
  generateTableRow("test 3");
});

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

<table id="results"></table>

answered Mar 16, 2016 at 17:41

Tomalak

339k68 gold badges547 silver badges635 bronze badges

2 Comments

user3953989 Over a year ago

+1 This is a more elegant way to implement but I chose @Meiko's answer as it was answering and explaining what I was doing wrong not a better way to do it. In the future I will refactor to use this instead however.

Tomalak Over a year ago

No worries, as long as you use it to learn it's all right. Thanks for the feedback.

Collectives™ on Stack Overflow

How to execute javascript methods generated in html onlclick events

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related