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（）函数才能正常工作。如果您创建第一个，然后单击底部项目上的删除，该项目的onclick（）函数将被调用两次，我不能为我的生活找出原因。

Answer 1

看不到小提琴正在运行，但是从代码中你可能想要改变

$('#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的调用）

Pd积。 .on适用于jquery 1.7及更高版本，如果您使用的是早期版本，则可以使用.live或.delegate来实现该目标

Answer 2

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

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

当你有3个删除按钮时，它被调用三次，2个按钮，两次，因为在每次添加时，你将另一个点击处理程序添加到列表中..

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

2 个答案: