$('.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
, но он не работает.
Если я не генерирую таблицу динамически, эта функция работает.
3 ответа
Поскольку элемент .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>
Вместо того :
$('.delete').on('click',function() {
//your operations
});
Используйте следующее :
$('body').on('click', '.delete', function() {
//your operations
});
В JavaScript, когда вы хотите привязать какое-либо событие к определенному элементу, этот элемент должен присутствовать, прежде чем связывать это событие (даже тот же элемент, что и предыдущий, вы создаете заново).
Вот почему фреймворки JavaScript, такие как AngularJs , настолько известны, что позволяют достичь того, чего вы хотите.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.