첫 번째 클릭 후 ajax가 완료되면 두 번째 클릭 e.stopPropagation

Question

일부 div를 클릭하면 div가 추가되고 새로 생성 된 div 안에 일부 데이터가로드됩니다. 문제는 div에 두 번째 클릭이 발생할 때 발생하는 문제입니다. 그 원인은 append이고 다른 div는 여전히 존재하고 가시적 인 혼란과 혼란을 일으키는 이전 div의 사본입니다.

두 번째 클릭을 중지하거나 두 번째를 만들 때 처음 만든 div를 삭제하려면 어떻게합니까?

자바 스크립트.

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