Question

我创建了一个通过jQuery将数据发送到页面的网页。单击“新建”可以复制表单。出于某种原因，提交函数会多次运行。如果我创建了三个表单，并在第一个表单上单击“提交”，则会为此创建三个表单。然后删除该表单。当我提交第二个表单时，它会生成两个条目，依此类推。

有人能告诉我以下代码有什么问题吗？

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();
});
}

谢谢！

Answer 1

您重新绑定重复事件，而只是使用事件委派，这样您甚至不需要致电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() {....

Answer 2

当生成新表格时，可能会绑定按钮当您这样做时，您将相同的事件绑定到已经附加了点击事件的一个按钮然后，当您单击所有事件时将运行。

使用click或on('click', ...来阻止此行为。

Demo

Answer 3

使用最旧的jquery，您可以使用“live”和“on（'click'）”解决方案，但在此之前，您还需要使用die和unbind“杀死”绑定。

在1.9+ jquery版本中，“live（...”语法替换为“on（...”语法）。请记住升级/更改内容。

开（..语法用法：

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

关于旧的绑定方法，您可以找到一些文档here.

jQuery是否重复POST请求？

3 个答案: