Question

在我的应用中，有一个包含国家/地区数据的表格，它还使用了分页功能。对于每一行，都有一个删除按钮，通过ajax触发一个函数，并从数据库中删除该国家/地区，该行向上滑动，并根据我们所处的页面再次呈现该表。

这是我原来的功能：

$(document).on('click', '.glyphicon-remove', function(event) {
    var thiz = $(this);
    var id = thiz.next('input:hidden').val();

    $.ajax({
        url: '/country/' + id,
        type: 'DELETE'
    })
    .done(function() {
        thiz.parent().parent().parent()
            .find('td')
            .wrapInner('<div style="display: block;" />')
            .parent()
            .find('td > div')
            .slideUp(200, function() {
                thiz.parent().parent().remove();
                    if (curPage) {
                        if ($('.table > tbody > tr').length > 1) {
                            renderCountries(curPage);
                        } else {
                            var page = getURLParameter(curPage, 'page');
                            if (page !== '1') {
                                prevPage = previousPageURL(curPage, 'page');
                                renderCountries(prevPage);
                                curPage = prevPage;
                            } else {
                                renderCountries();
                            }
                        }
                    } else {
                        renderCountries();
                    }
            });
    });
});

但是，我发现slideUp()函数被执行多次，这搞砸了整个事情，我不知道原因，所以我改了它，现在我正在使用{ {1}}：

delay()

但是，现在在$(document).on('click', '.glyphicon-remove', function(event) { var thiz = $(this); var id = thiz.next('input:hidden').val(); $.ajax({ url: '/country/' + id, type: 'DELETE' }) .done(function() { thiz.parent().parent().parent() .find('td') .wrapInner('<div style="display: block;" />') .parent() .find('td > div') .slideUp(200) .delay(200, function() { thiz.parent().parent().remove(); if (curPage) { if ($('.table > tbody > tr').length > 1) { renderCountries(curPage); } else { var page = getURLParameter(curPage, 'page'); if (page !== '1') { prevPage = previousPageURL(curPage, 'page'); renderCountries(prevPage); curPage = prevPage; } else { renderCountries(); } } } else { renderCountries(); } }); }); });执行两次后执行的功能。我不明白为什么会发生这种情况，我想知道如何解决这个问题。

修改：HTML

delay()

Answer 1

我删除了一堆额外的代码，但这是我的建议：

$.ajax({
    url: '/country/' + id,
    type: 'DELETE'
})
.done(function() {
    var first = true;
    thiz.parent().parent().parent()
        .find('td')
        .wrapInner('<div style="display: block;" />')
        .parent()
        .find('td > div')
        .slideUp(200)
        .delay(200, function() {
            if (first==true){
                first=false;
                thiz.parent().parent().remove();
                if (curPage) {
                    if ($('.table > tbody > tr').length > 1) {
                        renderCountries(curPage);
                    } else {
                        var page = getURLParameter(curPage, 'page');
                        if (page !== '1') {
                            prevPage = previousPageURL(curPage, 'page');
                            renderCountries(prevPage);
                            curPage = prevPage;
                        } else {
                            renderCountries();
                        }
                    }
                } else {
                    renderCountries();
                }
           }
        });
});

没有解决两次触发的问题，只执行一次你的部分代码。

防止js函数执行两次

1 个答案: