後第一次點擊，如果阿賈克斯完成後，在第二次點擊e.stopPropagation

Question

當用戶點擊一些股利，股利附加和Ajax加載新創建的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); 
    }); 
});