当点击某个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);
});
});
答案 0 :(得分:0)
使用.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);
});
});