1

jQuery 経由でページにデータを送信する Web ページを作成しました。「新規」をクリックすると、フォームを複製できます。何らかの理由で、submit 関数が複数回実行されます。3 つのフォームを作成し、最初のフォームで [送信] をクリックすると、3 つのエントリが作成されます。その後、フォームは削除されます。2 番目のフォームを送信すると、2 つのエントリが作成されます。

次のコードの何が問題なのか誰か教えてもらえますか?

function listen() {
$(".addBook").on('click', function() {
    $(this).fadeOut("fast", function() {
        $(this).parent().find(".loadingImg").fadeIn();
    });
    var target = $(this).parent();
    var title = $(target).find(".bookTitle").val();
    var author = $(target).find(".bookAuthor").val();
    var genre = $(target).find(".bookGenre").val();
    var barcode = $(target).find(".bookBarcode").val();
    var img = encodeURIComponent($(target).find(".coverSelect").val());
    var data = 'barcode=' + barcode + '&title=' + title + '&author=' + author + '&genre=' + genre + '&img=' + img;
    $.post('addBook', data, function() { alert(title); });
    $(this).parent().parent().slideUp("med", function() {
        $(this).remove();
    });
});
}


//new form function
function newBook(barcode) {
var data = 'barcode=' + barcode;
$.post('bookInfo', data, function(data) {
    $('.accordion').append(data);  //php script returns html for form
    $('.accordion > dd').hide();
    $("#closeAccordion").show();
    listen();
});
}

ありがとう！

4

3 に答える 3

3

代わりに、重複したイベントをバインドしています。代わりに、イベントの委任を使用して、 を呼び出す必要さえありませんlisten()。

//function listen() {
$(document).on('click', '.addBook', function() {
    $(this).fadeOut("fast", function() {
        $(this).parent().find(".loadingImg").fadeIn();
    });
    var target = $(this).parent();
    var title = $(target).find(".bookTitle").val();
    var author = $(target).find(".bookAuthor").val();
    var genre = $(target).find(".bookGenre").val();
    var barcode = $(target).find(".bookBarcode").val();
    var img = encodeURIComponent($(target).find(".coverSelect").val());
    var data = 'barcode=' + barcode + '&title=' + title + '&author=' + author + '&genre=' + genre + '&img=' + img;
    $.post('addBook', data, function() { alert(title); });
    $(this).parent().parent().slideUp("med", function() {
        $(this).remove();
    });
});
//}


//new form function
function newBook(barcode) {
var data = 'barcode=' + barcode;
$.post('bookInfo', data, function(data) {
    $('.accordion').append(data);  //php script returns html for form
    $('.accordion > dd').hide();
    $("#closeAccordion").show();
    //listen();
});
}

注:など、フォームを追加する要素を選択するセレクターに
置き換える必要があります。document.accordion

$('.accordion').on('click', '.addBook', function() {....
于 2013-03-28T19:18:02.897 に答える
1

おそらく、新しいフォームが生成されたときにボタンをバインドします。
これを行うと、同じイベントが、既にクリック イベントが関連付けられている 1 つのボタンにバインドされます。
次に、クリックするとすべてのイベントが実行されます。

clickorを使用on('click', ...して、この動作を防ぎます。

デモ

于 2013-03-28T17:56:02.983 に答える
1

最も古い jquery では、「ライブ」および「on('click')」ソリューションを使用できますが、その前に、die でバインディングを「kill」してバインドを解除する必要もあります。

1.9以降のjqueryバージョンでは、「live(...」構文が「on(...」構文に置き換えられました。アップグレード/変更のものに注意してください。

On(.. 構文の使用法:

 $("#myButton").on("click", function(){
    alert("you call me!");
});

古いバインディング方法については、ここにいくつかのドキュメントがあります。

于 2013-03-28T18:04:34.153 に答える