Я пытаюсь реализовать простой код jquery, одну функцию, которая добавит новые строки в таблицу:
function add_row(){
$('#giants_table tr:last').before('<tr><td><input type="text" name="giants_#" id="giants_#"><input type="button" id="removebtn" value="Remove row" onclick="remove_row()"</td></tr>')}
И вторая функция для удаления этой строки:
function remove_row(){
$(this).parents('tr').remove()}
Первая функция работает просто отлично, но оказывается, что во второй функции "этот" селектор не установлен.
Есть идеи?
Когда вы регистрируете обработчик события inline (то есть внутри HTML-кода), он не устанавливает this
параметр - он будет установлен на глобальный (window
) объект.
Один из вариантов состоит в том, чтобы передать this
как параметр remove_row
, но вам гораздо лучше создать одноразовый один делегированный обработчик событий, используя jQuery:
$('#giants_table').on('click', 'button', remove_row);
Затем вы можете полностью опустить атрибут onclick
в свой HTML-код. Поскольку это "делегированный" обработчик, он будет автоматически работать с каждой строкой, добавленной в вашу таблицу, даже если они не существуют на момент регистрации события.
Принципиальные преимущества использования jQuery для регистрации ваших событий вместо их встроенных:
this
event
(в отличие от ранних версий MSIE)event
для устранения различий браузераЭто можно сделать двумя способами
Передайте this
в вызове функции.
function add_row(){
$('#giants_table tr:last').before('<tr><td><input type="text" name="giants_#" id="giants_#"><input type="button" id="removebtn" value="Remove row" onclick="remove_row(this)" /></td></tr>');
}
function remove_row(ele){
$(ele).parents('tr').remove();
}
Привяжите клик и используйте $(this)
function add_row(){
$('#giants_table tr:last').before('<tr><td><input type="text" name="giants_#" id="giants_#"><input type="button" id="removebtn" class="removebtn" value="Remove row" onclick="remove_row(this)"/></td></tr>');
$('#giants_table tr td .removebtn').unbind('click').bind('click', function() {
$(this).parents('tr').remove();
});
}
Я бы предпочел пойти на второй вариант.
Вы можете делегировать обработчик click
(возможно, лучшее решение) или просто назначить его при создании строки. Примеры ниже (с использованием создания DOM Element, вместо разметки HTML, потому что это лучшая практика).
// delegate the function once in your DOM.ready
$('#giants_table tr').on('click', 'input[type="button"][value="Remove Row"]', function (e) {
$(this).parents('tr').remove(); // this will point to the input
});
// or assign it when you create the row
function add_row(){
var input = $('<input />'), //create new DOM elements
row = $('<tr />'),
cell = $('<td />'),
rowCount = $('#giants_table tr').length;
$('#giants_table tr:last').before(tr.append(td.append(input.clone().attr({
"id": "giants_" + rowCount,
"name": "giants_" + rowCount,
"type": "text"
})).append(input.clone().attr({
"id": "removeRow" + rowCount,
"type": "button",
"value": "Remove Row"
}).click(function (e) {
$(this).parents('tr').remove(); // this now points to the input
}))));
}
.clone()
поскольку вы заново создаете новые экземпляры необходимых элементов каждый раз, когда вызывается функция. Следует также отметить , что MSIE не допускаетtype
атрибутinput
быть изменен после того, как она была создана.