第一次单击后，如果ajax完成，则在第二次单击e.stopPropagation [英] After first click, If ajax is done, on second click e.stopPropagation

问题描述

当单击某个div时，将添加一个div并将ajax加载到新创建的div中的某些数据，问题是，当在导致该附加的div上进行第二次单击时，将创建另一个div，它是该div的重复项前一个div仍然存在并且可见，从而造成混乱和混乱.

When some div is clicked, a div is appended and ajax loads some data inside the newly created div, problem is that when a second click occurs on the div that causes the append, another div is created which is the duplicate of the previous div which still exists and visible creating clutter and disorder.

创建第二个div时，如何停止第二个单击或销毁第一个创建的div?

How do i stop a second click or destroy the first created div when the second one is created?

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

推荐答案

使用 .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);
    });
});

---

尝试使用更干净的版本

---

Try a little more cleaner version

$(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！