jQuery 重复 POST 请求？答案

【问题标题】：jQuery is duplicating POST requests?jQuery 重复 POST 请求？
【发布时间】：2013-03-28 17:47:38
【问题描述】：

我制作了一个通过 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();
});
}

谢谢！

【问题讨论】：

我们需要查看 html 以及“新表单”和“删除表单”功能。给定的代码可以与匹配它的 html 一起使用。
如果整个表单被复制，这是否意味着标记为 .addBook 的按钮/链接也被复制了？如果是这种情况，那么当您单击 .addBook 项目时，它会触发页面上所有具有 .addBook 类的项目。（只是猜测，这就是为什么我没有将其作为答案。需要根据@KevinB 的评论查看更多信息。）
"当您单击一个 .addBook 项目时，它会为页面上所有具有类 .addBook 的项目触发。"什么？绝对不是它没有。你能证实这一说法吗？
关于：var target = $(this).parent(); var title = $(target).find(".bookTitle").val();...target 已经是一个 jQuery 对象，您不需要在下一行中再次包装它。
@JasCav 这不是真的，它只会触发点击的元素。点击只发生在一个元素上。

标签： jquery ajax forms post

【解决方案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() {....

【讨论】：

【解决方案2】：

可能在生成新表单时绑定按钮。
执行此操作时，您会将相同的事件绑定到一个已附加单击事件的按钮。
然后，当您单击时，所有事件都会运行。

使用click 或on('click', ... 来防止这种行为。

Demo

【讨论】：

【解决方案3】：

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

在 1.9+ jquery 版本中，"live(..." 语法被 "on(..." 语法取代。请记住升级/更改的内容。

On(.. 语法用法：

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

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

【讨论】：