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

【问题标题】：onclick function added by jquery is being called twicejquery添加的onclick函数被调用了两次
【发布时间】：2012-06-01 16:53:22
【问题描述】：

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() 函数仅在只有一个过滤器项时才能正常工作。如果您创建第一个，然后单击底部项目上的删除，该项目的 onclick() 函数将被调用两次，我终生无法弄清楚原因。

【问题讨论】：

标签： jquery onclick

【解决方案1】：

看不到 fiddle 正在运行，但您可能想从代码中更改

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

到

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

（与其他点击相同）

编辑：哦，现在我可以看到它在运行。在我看来，实际问题是，当您添加“删除”链接时，您会重新绑定 click for .remove-filter （包括已创建的链接）。相反，您可以做的是只使用一次.on，它适用于您拥有的所有元素以及您创建的任何新元素。比如……

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

在document.ready 中执行一次，然后应该执行此操作（添加“删除”链接后删除对 reg_remove 的调用）

P.D. .on 适用于 jquery 1.7 及更高版本，如果您使用早期版本，您将使用 .live 或 .delegate 来实现这一目标

【讨论】：

我认为 fiddle 设置为 mootools 而不是 jQuery，抱歉。
这里的问题不是 e.preventDefault，而是我们将 click 分配给 .remove 每次创建时。

【解决方案2】：

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

发生的事情是您在每个条目上调用 .remove ，当您有多个删除按钮时，它将为每个创建的按钮调用单击（每次创建新按钮时，都会添加一个新的单击事件到 .remove 选择器...您需要这些是固有的。在创建时，添加一个仅记录该记录的匿名函数调用，您将不再有这个问题

当您有 3 个删除按钮时，它会被调用 3 次、2 个按钮、2 次，因为在每次添加时，您都会向列表中添加另一个点击处理程序..

【讨论】：