jquery添加的onclick函数被调用了两次

Question

var filters_used = new Array();
$('#filter-text').keyup(function(k) {
    $('#error').html('');
    if (k.keyCode == 13) {
        $('#add-filter').click();
    }
});

function reg_remove() {
    $('.remove-filter').click(function() {
        console.debug("remove-filter.click()");
        var col = $(this).children('td:nth-child(2)').html();
        var index = $.inArray(col, filters_used);
        filters_used.splice(index, 1);
        $(this).parents('.filter').remove();
        return false;
    });
}

function check_value() {
    var flag = true;
    var value = $('#filter-text').val();
    var col = $('#filter-type').val();
    var reg = /[^0-9a-zA-Z\s\-]/;
    if (value.match(reg) || value.trim() === "") {
        flag = false;
        $('#error').html('Only letters, numbers, spaces, and dashes (-) are allowed.');
    } else if ($.inArray(col, filters_used) >= 0) {
        flag = false;
        $('#error').html('That column is already being filtered.');
    }
    return flag;
}
$('#add-filter').click(function() {
    if (check_value()) {
        var value = $('#filter-text').val();
        var col = $('#filter-type').val();
        $('#filter-text').val('');
        appendstr = '<tr class="filter"><td>' + value + '</td><td>' + col + '</td><td>' + '<a href="" class="remove-filter">Remove</a></td></tr>';
        $('#filter-form').after(appendstr);
        filters_used.push(col);
        reg_remove();
        //queryDB();
    }
});

function get_filters() {

}?

Link to a fiddle containing my code

本质上，我试图让用户创建一个过滤器列表。添加它们似乎可以很好地工作，但是只有当只有一个过滤器项时，remove()函数才能正常工作。如果您创建了第一个，然后在最下面的项上单击remove，该项的onclick()函数将被调用两次，而我无论如何也找不出原因。

Answer 1

我看不到小提琴在运行，但是从代码中，您可能想要更改

$('#add-filter').click(function() {

至

$('#add-filter').click(function(e) {
    e.preventDefault()

(与另一次单击相同)

编辑:哦，现在我可以看到它在运行了。在我看来，实际的问题是，当你添加一个“删除”链接时，你会对.remove-filter的click进行重新绑定(包括已经创建的链接)。相反，您可以只使用.on一次，它将应用于您拥有的所有元素以及您创建的任何新元素。就像..。

$('table').on("click", ".remove-filter", function() {
...

在document.ready中这样做一次，这样就可以了(在添加'remove‘链接后删除对reg_remove的调用)

P.D. .on可以在jQuery1.7和更高版本上运行，如果你使用的是早期版本，你可以使用.live或.delegate来实现

Answer 2

是的，将框架更改为jquery以使您的小提琴工作。

实际情况是，您在每个条目上调用.remove，并且当您有多个删除按钮时，它将为创建的每个按钮调用click (每次您创建一个新的click事件时，您向.remove selector...you添加一个新的click事件需要这些事件是固有的。在创建时，添加一个仅记录的匿名函数调用，就不会再有这个问题了

当你有3个remove按钮时，它会被调用3次，2个按钮，2次，因为每次添加时，你都会向列表中添加另一个click处理程序。