Проблема с подключаемым модулем DataTable и обработчиком событий jquery - PullRequest
Новая
       13

Проблема с подключаемым модулем DataTable и обработчиком событий jquery

0 голосов
/ 25 мая 2018

Я прочитал несколько статей и jQuery документацию по API и понимаю, что нет никакой разницы между click() и on('click'), кроме делегата события.

И я использую Datatables и его плагин выбора вмоя страница;Мой HTML-тег и скрипт идентичны следующему коду. 

<div class='panel'>
    <table class='data-table'>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr data-id='1'>
                <td>Row 1, 1</td>
                <td>Row 1, 2</td>
            </td>
            <tr data-id='2'>
                <td>Row 2, 1</td>
                <td>Row 2, 2</td>
            </td>
            <tr data-id='3'>
                <td>Row 3, 1</td>
                <td>Row 3, 2</td>
            </td>

        </tbody>
    </table>
</div>

<script>
    $('table tbody tr').click(function(){
        console.log("Click(): " + $('table tr.selected').data('id'));
    });
    $('table').on('click', 'tbody tr', function() {
        console.log("On(Click()): " + $('table tr.selected').data('id'));
    });
</script>

, когда click() и on('click') совпадают, я должен получить одинаковые результаты консоли, но я получил после выбора первой строки (data-id=1) 

On(Click()): undefined
Click(): 1

затем при нажатии на вторую строку из первого 

On(Click()): 1
Click(): 2

, то есть я вижу, что on('click()') выполняется до процедуры выбора таблицы данных, а click() выполняется после того же самого,Какое исправление можно применить, чтобы и click(), и on(click()) выполнялись после процедуры выбора таблиц данных.

Поскольку набор данных в моей таблице огромен, мне нужно применить делегирование, т. е. on(click()),

Обновление

с использованием this в событиях даст доступ к выбранной строке, но повторное нажатие на ту же строку в таблице данных удалит выделение, поэтому результат должен быть undefined дляобе функции.

1 Ответ

0 голосов
/ 25 мая 2018

В вашем селекторе jquery используйте ключевое слово this вместо: 

$('table tbody tr').click(function(){
    if($(this).hasClass( "selected" ) == true) {
        console.log("Click(): " + $(this).data('id'));
    }
});
$('.data-table').on('click', 'tbody tr', function() {
    if (!$(this).hasClass('selected'))
        console.log("On(Click()): " + $(this).data('id'));
    else
        console.log('nothing selected');
});
...