Reputation: 36317
I am using the jquery datatables plugin. I have a number of database rows with non sequential or missing ids : e.g.
id actual row
1 1
2 2
3 3
..
9 9
11 10
I have placed a button at the beginning of each row which onclick will grab and send the row to another function for further processing. following the datatables format, the HTML looks like:
<table id="myDataTable">
<thead>
<tr>
<th>SEND TO</th>
<th>ROW</th>
<th>id</th>
<th>email</th>
<th>notes</th>
.......
</thead>
<tbody>
<tr id="1">
<td><button value="1" name="button1">PROCESSING</button></td>
<td>1</td>
<td>1</td>
.....
my javascript looks like:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable();
});
$(document).ready(function () {
$('button[name=button1]').click(function(){
var id= $(this).attr("value");
console.log(id);
window.location.href="AjaxController/sendToProcess/"+id;
});
});
</script>
Up to row 10 ( id 11 ) everything works as expected. Beyond this The click function does not appear to fire ( nothing is logged to console). I see no errors in the console. Why is this happening and how can I fix it
Upvotes: 0
Views: 992
Reputation: 388416
Looks like you are dealing with dynamic elements here because you have a paged table
You need to use event delegation
$(document).on('click', 'button[name=button1]', function(){
var id= $(this).attr("value"); //or $(this).closest('tr').attr('id')
console.log(id);
window.location.href="AjaxController/sendToProcess/"+id;
});
Upvotes: 3