Question

我正在尝试实现一个简单的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()}

第一个函数工作正常，但似乎在第二个函数中没有设置“this”选择器。

有什么想法吗？

Answer 1

您可以使用两种方式完成此操作

在函数调用中传递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();
    });
}

我肯定更愿意选择第二种选择。

Answer 2

当您内联注册事件处理程序时（即在HTML代码中），它不会设置this参数 - 它将被设置为全局（window）对象。

一个选项是将this作为参数传递给remove_row，但使用jQuery创建一次性单一委托事件处理程序会更好：

$('#giants_table').on('click', 'button', remove_row);

然后，您可以完全省略HTML代码中的onclick属性。由于这是一个“委托”处理程序，它会自动处理添加到表中的每一行，即使它们在注册事件时不存在。

使用jQuery注册事件而不是内联它们的主要优点是：

自动设置this
保证传递event对象（与早期的MSIE版本不同）
规范化event对象的属性以删除浏览器差异

Answer 3

您可以委派click处理程序（可能是更好的解决方案），或者只是在创建行时分配它。下面的示例（使用DOM元素创建，而不是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
    }))));
}

使用onclick属性调用jquery函数，该属性将“this”传递给函数

3 个答案: