Разве невозможно получить таблицу кликов, которая генерируется динамически?

Question

$('.delete').on('click',function(){
    console.log("deleteclick");
});

for (i = 0; i < e.data.length;i++){
       $('#methodTable').append('<tr><td>' + e.data[i].isTejimai + 
               '</td><td>'+ e.data[i].isLossProfCut + '</td><td>' +
            '<button id="' + e.data[i].id + 
            '" class="btn btn-default btn-md delete">' + 
            '<span class="glyphicon glyphicon-remove"></span>' + 
            '</button></td></tr>');
}

Этот код добавляет <tr></tr> в метод methodTable динамически

Это сделало HTML таким (вывод окна отладки)

<button id="6" class="btn btn-default btn-md delete" data-enpassid="__1">
    <span class="glyphicon glyphicon-remove"></span>
</button>

У него есть класс delete, поэтому, если я нажму эту кнопку, он должен вызвать delete function, но он не работает.

Если я не генерирую таблицу динамически, эта функция работает.

javascript jquery

2

whitebear 31 Авг 2017 в 21:54

Answer 1

Поскольку элемент .delete был динамически добавлен в DOM, вы должны прикрепить событие click, используя делегирование on() , например:

$('body').on('click','.delete',function(){
    console.log("deleteclick");
});

Надеюсь это поможет.

$('body').on('click','.delete',function(){
  console.log("delete click on button "+this.id);
});

for (i = 1; i <= 3;i++){
  $('#methodTable').append('<tr><td>Column 1 </td><td>Column 2 </td><td>' +
    ' <button id="id_'+i+'" class="btn btn-default btn-md delete">' + 
    '<span class="glyphicon glyphicon-remove"></span>' + 
    '</button></td></tr>');
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id='methodTable'></table>

3

Zakaria Acharki 31 Авг 2017 в 18:56

Answer 2

Вместо того :

$('.delete').on('click',function() {
    //your operations 
});

Используйте следующее :

$('body').on('click', '.delete', function() {
    //your operations
});

0

Deepansh Sachdeva 31 Авг 2017 в 19:06

Answer 3

В JavaScript, когда вы хотите привязать какое-либо событие к определенному элементу, этот элемент должен присутствовать, прежде чем связывать это событие (даже тот же элемент, что и предыдущий, вы создаете заново).

Вот почему фреймворки JavaScript, такие как AngularJs , настолько известны, что позволяют достичь того, чего вы хотите.

-1

Laxminarayan 31 Авг 2017 в 19:04

Разве невозможно получить таблицу кликов, которая генерируется динамически?

3 ответа

Похожие вопросы

Новые вопросы

javascript