Alert() не срабатывает со второй страницы таблицы данных

У меня есть данные, возвращенные из бэкэнда с использованием плагина Jquery и datatables. Мне нужно выбрать номер заказа в таблице данных и предупредить его. Оповещение и консоль хорошо работают на первой странице таблицы данных, но больше не срабатывают на второй странице. Я погуглил, но .live() устарел, а предложенный ответ .on() кажется не работает.

JQuery:

$(document).ready(function () {
$.ajax({
    type: "POST",
    //url: "OrderDetail.asmx/HelloWorld",
    url: "Order.aspx/GetOrder",
    data: "{'id':'273440'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $('#order').append(msg.d);
        //alert(msg.d);
        console.log(msg);
        $('#orderTable').dataTable({
            // "sScrollY": "100px",

            "bAutoWidth": false,
            "bDeferRender": true
            //"bPaginate": false

        });
        // Click order number to get the details
        // Problem is here 
        $('.orderNumber').on('click', function () {
            var orderNum = $(this).text();
            console.log(orderNum);
        });

    },
    error: function (xhr, status, error) {
        // Display a generic error for now.
        alert("Ajax Error!");
    }
});

});


jquery jquery-datatables
person Quentin    schedule 23.08.2013    source источник
comment
Что ты пытаешься сделать?   -  person Ahmed Alaa El-Din    schedule 23.08.2013
comment
@AhmedAlaaEl-Din Мне нужно выбрать номер заказа в таблице данных и предупредить его. Но это не будет работать на второй странице таблицы данных   -  person Quentin    schedule 23.08.2013

Ответы (1)


arrow_upward
4
arrow_downward

Событие onclick, которое вы настроили, применяется только к элементам на странице. Вот почему это работает только для первой страницы. Вы должны настроить события onclick всякий раз, когда таблицы данных показывают новые результаты. Этого можно добиться, переместив прослушиватель onclick в функцию fnDrawCallback таблицы данных.

$('#orderTable').dataTable({
    // "sScrollY": "100px",

    "autoWidth": false,
    "deferRender": true,
    //"bPaginate": false,

    "drawCallback": function() {
        $('.orderNumber').on('click', function () {
            var orderNum = $(this).text();
            console.log(orderNum);
        });
    }
});

см. https://datatables.net/reference/option/drawCallback

person user1333371    schedule 23.08.2013