Question

I’m having difficulty making a clickable button in my dynamically generated table that would send data specific to the table cell that was clicked.

My table is generated and modified whenever the user types into the search box with this AJAX call:

      $(document).ready(function(){
        $("#data").keyup(function () {
            $.ajax({
                type: "POST",
                dataType: "JSON",
                data: "data=" + $("#data").val(),
                url: "search1.php",
                success: function(msg){
                    var output = "";
                    for(var i = 0; i < msg.length; i++) {
                        output += '<tr onmouseover=this.style.backgroundColor="#ffff66"; onmouseout=this.style.backgroundColor="#F0F0F0";>';
                        output += '<td>';
                        if (msg[i].website != ''){ output += '<a href = ' + msg[i].website + ' target = "_blank">' + msg[i].name + '</a></td>';}
                        else output += msg[i].name + '</td>';
                        output += '<td class="description">' + msg[i].description + '</td>';
                        output += '<td><input type="button" onclick=' + submit() + ' value=' + msg[i].id + '></td></tr>'; // Here is where I'd like to put in a clickable button 
                    }
                    $("#content").html(output);
                    $("#myTable").trigger("update");
                }
            });
        });
    });

If I make submit() simply alert("hello") it runs when the page is loaded for every instance of the onclick call to submit(). Could someone please explain to me how to make submit only get called when its button is clicked and not on page load. Thanks in advance.

Answer 1

You are trying to assign submit() to the button’s onclick, but you are actually calling the function when you generate the string output. It needs to be in quotes inside the string, not concatenated in.

 output += '<td><input type="button" onclick="submit()" value="' + msg[i].id + '"></td></tr>';
 //----------------------------------------^^^^^^^^^^^^

A better strategy would be to leave out the onclick attribute entirely, and use jQuery’s .on() to dynamically assign the method. It is often considered a better practice to bind events dynamically rather than hard-code them into HTML attributes.

// No onclick attribute in the string:
 output += '<td><input type="button" value="' + msg[i].id + '"></td></tr>';

// And a call to .on() in the $(document).ready()
$('input[value="'+msg[i]+'"]').on('click', function() {
  submit();
});