Блог

У меня есть таблица данных пользователей, для которых я разрешаю администраторам редактировать информацию. Но проблема в том, что для привязки функций jquery к определенным ячейкам в таблицах данных необходимо перечислить функции либо в параметрах fnDrawCallback, либо в fnInitComplete инициализации datatable. Однако, когда пользователь обновляет строку и выполняется fnReloadAjax (для отображения новых изменений), все jQuery, которые были привязаны к ячейкам таблицы, больше не доступны! Я попытался поместить весь код jQuery как в fnDrawCallback, так и в fnInitComplete, и оба имеют одинаковый результат. Есть идеи?

     var oTable = $('.admin_users').dataTable({
    "bProcessing": true,
    "sAjaxSource": 'sql/admin_users.php',       
    "aaSorting": [[ 1, "asc" ]],
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bStateSave": true, //Use a cookie to save current display of items
    "aoColumns": [
        {"asSorting": [  ]},
        null,
        null,
        null,
        { "sType": "date", "sClass":"center" }
    ],
    "fnDrawCallback": function(){
            //Edit row
            $('.button_edit').click(function(){
                $(':input[type="text"]').val('');
                $(':input[type="checkbox"]').removeAttr('checked');
                $('.admin_edit_button.button_update').attr('id',$(this).attr('id'));
                $('.admin_edit_user').slideDown();
                var userid = $(this).attr('id');
                //GET USER INFO
                $.ajax({
                    url: 'sql/admin_edit',
                    type: 'POST',
                    dataType: 'json',
                    data: 'getinfo=trueamp;userid=' userid,
                    success: function(data){
                        //FILL IN INPUTS WITH USER VALUES
                    }
                });
                //UPDATE CHANGES
                $('.admin_edit_button.button_update').click(function(){
                    //GET NEW/UNCHANGED VALUES
                    $.ajax({
                        url: 'sql/admin_edit.php',
                        type: 'POST',
                        async: false,
                        data: //SEND DATA HERE,
                        success: function(response){
                            if(response=='true'){
                                $(':input[type="text"]').val('');
                                $(':input[type="checkbox"]').removeAttr('checked');
                                $('.admin_edit_user').slideToggle(function(){oTable.fnReloadAjax()});

                                alert("Success!");
                            }
                            if(response=='false')
                                alert('Failed to update user');
                        },
                        error: function(response){
                                alert('Failed to update user');
                        }
                    });
                });
            });
            $('.button_cancel').click(function(){
                $('.admin_edit_user').slideUp();
                $(':input[type="text"]').val('');
                $(':input[type="checkbox"]').removeAttr('checked');
            });
    },
    "bScrollCollapse": true,
    "sScrollX": "100%",
     "fnInitComplete": function() {
            oTable.fnAdjustColumnSizing();
     }
});
  

Вы могли бы попробовать делегирование.

 ...
fnInitCallback: function(settings){
    $('tbody',settings.nTableWrapper).delegate('.button_edit', 'click', function(){
        // Edit handler
    });

    // Etc.
}
  

tbody не должен быть сбит с толку перезагрузкой ajax.