1

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

谢谢！

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

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

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

演示

于 2013-03-28T17:56:02.983 回答
1

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

在 1.9+ jquery 版本中，“live(...”语法替换为“on(...”语法。记住升级/更改的东西。

On(.. 语法用法：

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

关于旧的绑定方法，您可以在此处找到一些文档。

于 2013-03-28T18:04:34.153 回答