javascript - jquery 不立即更新 DOM？

Question

我浏览了其他几个问题，尝试了几个选项，但还是有点茫然。

编辑 - 只是为了显示正在进行的实际 AJAX 调用..

$.ajax({
    type: 'GET',
    url: 'AJAXget/getPostcodeCheck.ashx',
    data: 'postcode=' + postcode,
    async: false,
    timeout: 10000,
    success: postcodeCallback,
    error: function () {
        alert('Sorry, there was an issue contacting the server.. please retry.');
        return;
    }
});

我有以下 jQuery AJAX 绑定(bind)函数，例如我想在其中显示正在加载的内容..

$('#' + btnID).bind('ajaxStart', function () {
    $('#' + btnID).append('<div>loading</div>');
});

这只是一个基本示例。我确实对元素使用了 addClass 函数(#btnID 是一个 div)，但似乎没有直接发生任何事情。

我在函数中放置了一个警报语句来测试 ajaxStart 是否被触发，它似乎确实是......所以我猜测我缺乏对 DOM 的理解和/或 jQuery 是错误的!即为什么没有立即显示任何 DOM 更新/注入(inject)？

非常感谢任何指示/想法!

Answer 1

尝试像这样编写您的 ajaxStart 方法:

$('#' + btnID).ajaxStart(function() {
  $(this).append('<div>loading</div>');
});

另外，看看当您简化对此的 jQuery Ajax 调用时会发生什么:

$.get('AJAXget/getPostcodeCheck.ashx', { postcode: postcode }, function(data) {
  //$('#yourResultElement').html(data);
  console.info(data);
});

如果您使用的是 Firebug(您使用的是 Firebug，对吗？)，请单击“控制台”选项卡并查看返回的内容。