Unable to call Jquery function on button click

Question

I am new to mvc and jquery,

I have created one table with jquery and I am adding a button on each row. I need to call one function on the button click with argument.

My code is given bellow

function loadData(data) {
 var tab = $('<table class="myTable"></table>');
 var thead = $('<thead></thead>');
 thead.append('<th>Id</th><th></th>');
 thead.append('<th>Username</th>');
 tab.append(thead);
 $.each(data, function (i, val) {
 var trow = $('<tr></tr>');
 trow.append('<td>' + val.empID + '</td>');
 trow.append('<td>' +"" + '</td>');
 trow.append('<td>' + val.empName + '</td>');
 trow.append('<td><input type="button" value="Edit" onclick="Details(" ' + val.empID + ');" /></td>');
 tab.append(trow);
 });
 $("tr:odd", tab).css('background-color', '#C4C4C4');
 $("#AllEmployees").html(tab);
 };

and my function is:

 function Details(k) {
 alert("Failed! Please try again.");
 };

Here both functions are inside the document.ready method.

But the function call is not working.

Answer 1

You have extra quote:

trow.append('<td><input type="button" value="Edit" onclick="Details(" ' + val.empID + ');" /></td>');
 ^

try this if your value val.empID is numeric:

trow.append('<td><input type="button" value="Edit" onclick="Details(' + val.empID + ');" /></td>')

If its a string then use \ to escape single quote:

trow.append('<td><input type="button" value="Edit" onclick="Details(\'' + val.empID + '\');" /></td>')

• user2006703: thanks i got the answer by changing that code and also i placed my function outside document.ready()

Answer 2

place the details function outside document ready.

function Details(k) {
 alert("Failed! Please try again.");
 }

Use this if you want to validate using your client side method. Return true/false from your method.

trow.append('<td><input type="button" value="Edit" onclick="return Details(' + val.empID + ');"

Answer 3

place the function outside document ready. Otherwise it will not be accessible from outside document ready. (your input will be rendered outside dom ready function)

• user2006703: thanks i got the answer by changing that code and also i placed my function outside document.ready()

Answer 4

Try this

 function loadData(data) {
 var tab = $('<table class="myTable"></table>');
 var thead = $('<thead></thead>');
 thead.append('<th>Id</th><th></th>');
 thead.append('<th>Username</th>');
 tab.append(thead);
 $.each(data, function (i, val) {
 var trow = $('<tr></tr>');
 trow.append('<td>' + val.empID + '</td>');
 trow.append('<td>' +"" + '</td>');
 trow.append('<td>' + val.empName + '</td>');
 var tabledata='<td><input type="button" value="Edit"/></td>'
 tabledata.attr("empID",val.empID);
 tabledata.click(Details)
 trow.append(tabledata);
 tab.append(trow);
 });
 $("tr:odd", tab).css('background-color', '#C4C4C4');
 $("#AllEmployees").html(tab);
 };
 function Details() {
 alert("Failed! Please try again."+this.attr("empID"));
 };

Answer 5

Why don't create an input like:

<input class="edit_button" type="button" value="Edit" />

And then in your document.ready

$('.edit_button').on('click', function(event){
 event.preventDefault();
 alert("Failed! Please try again.");
});