Question

当点击某个div时，会附加一个div并且ajax会在新创建的div中加载一些数据，问题是当导致附加的div上发生第二次单击时，会创建另一个div，它是以前的div仍然存在且可见，造成混乱和混乱。

如何在创建第二个div时停止第二次单击或销毁第一个创建的div？

的Javascript。

$(document).on('click', '.LibSectOpen', function() {
         var LibSect = ($(this).find('.SectionName').html())
         $(this).append('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>')
$.ajax({
    type:"POST",
    data: {data:LibSect},
    complete: function(){
    $('.LibraryBooksGIF, #QuickRead').fadeOut('slow')
    },
    url:"../php/books/Library_Load_Books.php"
    }).done(function(feedback){
    $('.LibraryBooks').html(feedback); 
});
});

Answer 1

使用.one()

$(document).one('click', '.LibSectOpen', function () {
    var LibSect = ($(this).find('.SectionName').html())
    $(this).find('.SectionName').empty()
    $(this).append('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>').load(function (e) {

    });
    $.ajax({
        type: "POST",
        data: {
            data: LibSect
        },
        complete: function () {
            $('.LibraryBooksGIF, #QuickRead').fadeOut('slow')
        },
        url: "../php/books/Library_Load_Books.php"
    }).done(function (feedback) {
        $('.LibraryBooks').html(feedback);
    });
});

尝试更清洁的版本

$(document).one('click', '.LibSectOpen', function () {
    var LibSect = ($(this).find('.SectionName').html())
    $(this).find('.SectionName').empty()
    var $libraryBooks = $('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>').appendTo(this);
    $.ajax({
        type: "POST",
        data: {
            data: LibSect
        },
        complete: function () {
            $('.LibraryBooksGIF, #QuickRead').fadeOut('slow')
        },
        url: "../php/books/Library_Load_Books.php"
    }).done(function (feedback) {
        $libraryBooks.html(feedback);
    });
});

首次单击后，如果ajax完成，请在第二次单击e.stopPropagation

1 个答案: