我可以根据附加的 <li> 元素列表触发函数吗？

Question

为了保持 post 干净，我缩小了所有内容。我试图在从页面中删除最后一个 <li> 元素后向 dom 添加内容，该元素已通过 jQuery.

附加

我有一个 .each 函数，它使用 JSON 数组通过 .append().

填充无序列表

var businessList = $('ul');
var businessInfo = [{"id": 10004, "category": "food"}]

$.each(businessInfo, function(idx, obj) {
        $(businessList).append('<li id="business-' + this.id + '">');
});

然后我有一个 $.ajax 调用，在检查提交的一些内容后删除每个 <li>。通过使用 .done 或 beforeSend: 函数中的脚本。

一切正常，直到我尝试添加一个函数以在删除最后一个 <li> 后触发。

假设我想要 <button> 到 fadeIn() 同时或在最后一个 <li> 元素消失后，我一直在尝试这样的事情：

$.ajax({
    type: "POST",
    url: "url",
    data: dataSource,
    dataType: "html",
    beforeSend: function() {
    //Invalid:
        if ($('li.class').is(':empty')) {
            xhr.abort();
        } 
    //Valid:
        else {
            $('li.class').remove();
        }

}).done(function() {
    $('document').ready(function() {
        if ($('li').length == 0) {
            $('.continue-btn').fadeIn(300);
            console.log('im the last one')
        }
    //Or this
    if ($('ul li:only-child')) {
            $('.continue-btn').fadeIn(300);
        }
    });
})

我根本无法让它只在页面上的最后一个 <li> 触发。在 beforeSend: 中使用相同的东西会导致行为略有不同。（我的脚本相应地触发，但在第一次提交时，而不是最后一次）

我怀疑它是因为它是附加的，实际上并不存在，但我调用的其他函数再次起作用。很困惑。

======================== 编辑：

正如 Rens 在下面建议的那样，归结为使用 success: 函数。如果有人感兴趣，这里是工作示例：https://jsfiddle.net/aquillium/qnj15g3r/

Answer 1

我会试试这个，看看控制台给你什么：

jQuery(document).ready(function($){

    var $doc = $(document);

    $doc.on('click', '.any-element', function(){
        console.log('execute ajax call');
        $('li.class').remove();
        var ajaxurl = 'escreen.php',
        $.ajax({
            url: ajaxurl,
            type: 'post',
            data: {
                buttons: $values,
            },
            success: function (result) {
                console.log('Yay it worked');
                if($('li').length==0){
                    $('.continue-btn').fadeIn(300);
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log('Something went wrong');
            }
        });
    });
});

我可以根据附加的 <li> 元素列表触发函数吗？

Can I fire functions based on an appended list of <li> elements?

ajax

jquery

append

operators