jquery - 为什么 $('something').length 没有在这个截断的代码上得到更新？

Question

function showMember() {
    $.ajax({
        type: 'get',
        url: '<?php echo $this->createUrl('member'); ?>',
        data: {
            index: $('#members fieldset').length
        },
        cache: false,
        dataType: 'html',
        success: function (html) {
            $('#members').append(html);
        }
    });
}

$(function () {
    showMember();
    $('.addMember').on('click', function () {
        showMember();
        //length+1 ???
        if ($('#members fieldset').length + 1 > 2) {
            $(this).hide();
        }
    });
});

为什么$('#members fieldset').length不考虑showMember();单击时调用添加的字段集？

有没有办法$('#members fieldset').length知道这一点，以避免添加 +1 ？

谢谢。

更新：这是基于以下答案的新代码：

$(function() {
   showMember();
   $('.addMember').on('click', function() {
        showMember().done(function() {
            alert('hi there');
            if($('#members fieldset').length > 2) {
              $(this).hide();
            }
        });
   });    
});  

好像没有进入.done(function，没有 alert()显示。

再次感谢。

Answer 1

您需要确保您的代码在 AJAX 请求完成后运行。最简单的方法是返回 promise 对象并为成功事件附加另一个处理程序：

function showMember() {
    return $.ajax({
        type: 'get',
        url: '<?php echo $this->createUrl('
        member '); ?>',
        data: {
            index: $('#members fieldset').length
        },
        cache: false,
        dataType: 'html',
        success: function(html) {
            $('#members').append(html);
        }
    });
}

$(function() {
    showMember();
    $('.addMember').on('click', function() {
        showMember().done(function() {}
        if($('#members fieldset').length + 1 > 2) {
            $(this).hide();
        });
    });
});

好消息是done()回调也接收相同的参数，success因此如果需要，您也可以在那里访问响应。

Answer 2

其他答案击败了我，但这只是提供的另一种选择

function showMember() {

    var THIS = this; // <------ note this

    $.ajax({
        type: 'get',
        url: '<?php echo $this->createUrl('member'); ?>',
        data: {
            index: $('#members fieldset').length
        },
        cache: false,
        dataType: 'html',
        success: function (html) {
            $('#members').append(html);
            if ($('#members fieldset').length + 1 > 2) {
                $(THIS).hide();
            }
        }
    });
}

$(function () {
    showMember();
    $('.addMember').on('click', function () {
        showMember.apply(this); // <--- and note this
    });
});

Answer 3

因为您的 if 语句不会等到您的 ajax 完成。可能在添加 html 之前执行计数。要么将 if 函数放在 setTimeout 中，要么在 ajax 回调中运行代码，就在附加 html 之后。