0

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

4

1 回答 1

3

看起来您在这里处理动态元素，因为您有一个分页表

您需要使用事件委托

$(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;

});
于 2013-08-07T03:06:56.340 回答