JQUERY trigger event stops working during pagination

JQUERY trigger event stops working during pagination

radi8radi8 Posts: 31Questions: 6Answers: 0
edited January 2015 in Free community support

I am using DataTables to display a large data-set of engineering drawings on a corporate intranet system. In the table, I am adding an <input type="option" class="id_check" value="myval"...> in the first column so that it can be selected and used (view/edit/delete).

Everything works on the first page, but if I navigate from the first page the trigger event fails.

The event I am using is as follows:

$('.id_check').on('click', dwg.get_form_row);

which does the following (gets value of selected row, assigns it to a variable, and enables options):

get_form_row:function(event){
        var ret = '';
        var found = false;
        $('#eng_dwgs tbody tr').each(function (i, row){
            if($(this).find('input:checkbox:checked').length > 0){
                dwg.dwg = $(this).find('input:checked').val();
                $('#sel_row').prop('disabled', false);
                $('#sel_row').click(dwg.do_edit);
                found=true;
            }
        });
        if(!found){
            dwg.dwg='';
            $('#sel_row').prop('disabled', true);
        }
    },

Looking at the generated html of the table, the navigation buttons have the standard <first><previous><span 1..10><next><last> and all have a class name of 'paginate_button' EXCEPT for the active page which changes the class to 'paginate_active'.

I am able to circumvent this issue when any of the buttons are used EXCEPT for the numeric ones (<first><previous><next><last> work but the ones in the <span...> do not) by adding the following:

$('a.paginate_button').on('click',function(){
    $('.id_check').on('click', dwg.get_form_row);
});

What I need to do is fire my binding event when the NUMERIC navigation buttons are selected.

I have a feeling that this issue exists because the new set of data is not displayed yet when the .on event is fired. Any help is appreciated.

ps. I tried to re-create this in datatables live, but am having issues and my site is on my intranet so I am screwed again.

pss. I got ti to replicate on datatables.live. Reference this: http://live.datatables.net/lawefato/1

Answers

  • radi8radi8 Posts: 31Questions: 6Answers: 0

    I think I found the solution. Using the following. this appears to work regardless of where in the datatable the selected row is:

    $('#eng_dwgs tbody').on( 'click', 'tr', function () {
        $(this).find('input:radio').attr('checked', true);
        dwg.dwg = $(this).find('input:checked').val();
        $('#sel_row').prop('disabled', false);
        $('#sel_row').click(dwg.do_edit);
    } );
    
This discussion has been closed.