Кнопки внутри таблицы данных

Question

Я новичок в JS, и я пытаюсь сделать что-то легкое, но не могу.

Я создаю датируемый, в последнем столбце есть кнопки, но когда я нажимаю на них, ничего не происходит.

My Datatable заряжается после нажатия на кнопку.(btn-search)

Спасибо.

$(document).ready( function () {
$('#btn-search').on('click', function() {

        $.ajax({
                type:        "GET",
                url:"{{myurlapi }}",
                }).done(function (result) {
                    var table = $('#example').DataTable( {
                    "data":result.data,
                    "columns": [
                            { "data": "id"  },
                            { "data": "name" },
                            { "data": null }
                        ],
                    "columnDefs": [
                        { "searchable": false,
                          "orderable": false,
                          "targets": 0
                        },
                        { width: '3%',
                          targets: 0
                        },
                        { targets: -1,
                          data: null,
                          defaultContent: '<div class="btn-group"> <button type="button" class=" btn btn-view"><span> <i class="icon-plus"></i></span> </button></div>'
                        },
                                   ],
                    "processing": true,
                    "retrieve": true,
                    "searching": false
            } );
              table.clear().draw();
              table.rows.add(result).draw();
            });
    });

             $('#example tbody').on('click', '.btn-view', function (e) {
                   alert('something')
     } );


});

<div class="col-6">
            <button id='btn-search' class="btn btn-primary px-4">Search</button>
          </div>

<div class='card-body'>
                <table id="example"
                        class="table text-right table-bordered table-striped nowrap"
                        width="100%">
                 <thea

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

Я думаю, что вам не хватает того, что ваши события кликов привязаны к элементам, которых нет в таблице при загрузке страницы.Когда вы загружаете данные, столбец, содержащий кнопку, загружается, но вы по-прежнему пропускаете события щелчка по ним.

Пожалуйста прочитайте эту ссылку , которая говорит, как добавить события при полной загрузке таблицы..

В javascript, когда вы размещаете селектор, он может применяться только к загруженным элементам, если вы не поместите его в «код, который следит за dom».В вашем случае вам не нужно постоянно смотреть DOM, так как вы можете запускать код после загрузки кнопок в DOM.

Если вы используете вышеупомянутую технику, упомянутую в функции initComplete, вы сможетеотладить это.Я не копировал примеры здесь, так как они уже упоминались по этой ссылке, однако есть много способов проверить данные, загруженные в таблицу, и я рекомендую использовать тот, который предоставляет библиотека, чтобы в будущем вы могли обновлять таблицы данных и другие библиотеки без проблем.

Answer 2

Вы вызываете событие on.click слишком рано.Если вы запускаете его при загрузке DOM, он будет работать ТОЛЬКО для кнопок, которые уже находятся в DOM.Все, что вы добавите позже (добавьте, замените все что угодно), не вызовет событие on.click.

Попробуйте это ->

$(document).ready(function() {
    $('#btn-search').on('click', function() {

        $.ajax({
            type: "GET",
            url: "{{myurlapi }}",
        }).done(function(result) {
            var table = $('#example').DataTable({
                "data": result.data,
                "columns": [{
                        "data": "id"
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": null
                    }
                ],
                "columnDefs": [{
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                    {
                        width: '3%',
                        targets: 0
                    },
                    {
                        targets: -1,
                        data: null,
                        defaultContent: '<div class="btn-group"> <button type="button" class=" btn btn-view"><span> <i class="icon-plus"></i></span> </button></div>'
                    },
                ],
                "processing": true,
                "retrieve": true,
                "searching": false
            });
            table.clear().draw();
            table.rows.add(result).draw();
        });
    });
    $(document).ajaxComplete(function() {
        $('#example tbody').on('click', '.btn-view', function(e) {
            alert('something')
        });
    });
});