jQuery是否重复POST请求？

我做了一个网页，通过jQuery发送数据到一个页面。通过点击“新建”可以复制表格。出于某种原因，提交功能会多次运行。如果我创建了三个表单，并在第一个表单上单击“提交”，它将为此创建三个表单。该表单然后被删除。当我提交第二个表单时，它会创建两个条目，等等。jQuery是否重复POST请求？

谁能告诉我下面的代码有什么问题吗？

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

谢谢！

来源

2013-03-28 Caleb

我们需要看到html和“新窗体”和“删除窗体”功能。给定的代码将与匹配它的html一起工作。 –

如果整个形式被复制，这是否意味着该按钮/链接标记.addBook也被复制？如果是这样的话，那么所发生的事情是，当你点击一个.addBook项目，它激发了页面上的带班.addBook所有项目。（只是一个猜测这就是为什么我不是做这一个答案。需要看每@ KevinB的评论更多信息。） – JasCav

“当你点击一个.addBook项目，它激发了页面上的带班.addBook所有项目“。什么？绝对不是。你能证实这一说法吗？ –

要绑定重复事件，相反，只是使用事件代表团，这样你甚至不需要调用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(); 
}); 
}

注：
你应该用什么选择元素要附加形式，如.accordion选择更换document。

$('.accordion').on('click', '.addBook', function() {....

来源

2013-03-28 19:18:02

谢谢，它的工作原理！ – Caleb

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

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

Demo

来源

2013-03-28 17:56:02

用最古老的jQuery，您可以使用“活”和“（‘点击’）”解决方案，但在此之前，你还需要“杀”与模具和取消绑定绑定。。

在1.9+版本的jQuery的 “活（...” 语法与 “上（...” 语法记住升级/更改的东西所取代

在（..语法用法：

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

关于老结合的方法，你可以找到一些文档的here.

来源

2013-03-28 18:04:34 huncyrus

jQuery是否重复POST请求？

回答

相关问题