0 
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() {

}?


基本的に、ユーザーがフィルターのリストを作成できるようにしようとしているコードを含むフィドルへのリンク。それらを追加するとうまくいくように見えますが、remove() 関数は、フィルター項目が 1 つしかない場合にのみ適切に機能します。最初に作成してから、一番下のアイテムの削除をクリックすると、そのアイテムの onclick() 関数が 2 回呼び出され、その理由が一生わかりません。

4

2 に答える 2

2

フィドルが実行されているのが見えませんが、コードから変更したい場合があります

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

に

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

(他のクリックも同様)

編集：ああ、今私はそれが走っているのを見ることができます。実際の問題は、「削除」リンクを追加すると、.remove-filter (既に作成されたものを含む) のクリックを再バインドすることです。代わりに、できることは.on一度だけ使用することであり、それはあなたが持っているすべての要素に加えて、あなたが作成する新しい要素に適用されます。何かのようなもの...

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

これを で 1 回実行するdocument.readyと、それが実行されます (「削除」リンクを追加した後、reg_remove への呼び出しを削除します)。

PD.onは jquery 1.7 以降で動作します。以前のバージョンを使用している場合は、.liveorを使用してそれ.delegateを実現します。

于 2012-06-01T16:56:09.723 に答える
0

はい、フレームワークをjqueryに変更して、フィドルを機能させます..

何が起こっているのかというと、各エントリで .remove を呼び出しており、複数の削除ボタンがある場合、作成されたボタンごとにクリックが呼び出されます (新しいボタンを作成するたびに、新しいクリック イベントが .セレクターを削除します...これらは固有のものである必要があります.作成時に、そのレコードのみを呼び出すanon関数呼び出しを追加すると、この問題はもう発生しません

3 つの削除ボタンがある場合、3 回、2 つのボタン、2 回呼び出されます。これは、追加するたびに別のクリック ハンドラーをリストに追加するためです。

于 2012-06-01T17:08:26.713 に答える