jquery中的同步动作不起作用

Question

第一个动作（添加div）完成得很好。 第二个动作（加载内容）很好。 第三个动作，没有发生。我需要删除已加载内容中的内容。可以以某种方式解释如何做到这一点？

$('#eucontentpage #country-choice .lang-ico').click(function(){
    $.when(
        $('.lightbox').after('<div id="insertnationalcontent"></div>')
    ).done(function() {
        $.when(
            $("#insertnationalcontent").load(loadlink)
        ).done(function() {
            $('#insertnationalcontent .lightbox').remove()
        }); 
    });
    return false;
});

Answer 1

由于只有jQuery开发人员知道的原因，.load()函数不会返回一个promise，因此你无法将它与.when一起使用 - 效果将是{{1 call将立即调用回调，然后稍后会出现新内容。

下面的插件创建了.when的备用版本，它确实会返回一个承诺：

.load

Answer 2

remove应该使用semi-colon正确结束，因为done中的匿名函数内的语句不同于您传递给when的参数

$('#eucontentpage #country-choice .lang-ico').click(function(){
    $.when(
        $('.lightbox').after('<div id="insertnationalcontent"></div>')
    ).done(function() {
        $.when(
            $("#insertnationalcontent").load(loadlink)
        ).done(function() {
            $('#insertnationalcontent .lightbox').remove();
        }); 
    });
    return false;
});

Answer 3

.after()在目标元素之后插入内容，.lightbox根据此处#insertnationalcontent的调用，不会是after()的子元素第$('#insertnationalcontent .lightbox').remove()行

注意，不确定html

$('#eucontentpage #country-choice .lang-ico').click(function(){
    $.when(
        $('.lightbox').after('<div id="insertnationalcontent"></div>')
    ).done(function(elem) {
      elem.siblings("#insertnationalcontent")
      .load(loadlink, function() {
        $(this).prev(".lightbox").remove()
       }); 
    });
    return false;
});

＆＃13;

＆＃13;

var loadlink = "https://gist.githubusercontent.com/guest271314/6a76aa9d2921350c9d53/raw/49fbc054731540fa68b565e398d3574fde7366e9/abc.txt";

$('#eucontentpage #country-choice .lang-ico').click(function(){
    $.when(
        $('.lightbox').after('<div id="insertnationalcontent"></div>')
    ).done(function(elem) {
      elem.siblings("#insertnationalcontent")
      .load(loadlink, function() {
        $(this).prev(".lightbox").remove()
       }); 
    });
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="eucontentpage">
  <div id="country-choice">
     <div class="lang-ico">
       click
     </div>
  </div>
</div>
<div class="lightbox">
  lightbox
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我通过在when / done结构的steead中使用load callback函数来解决它。

$('.lightbox').after('<div id="insertnationalcontent"></div>')

$('#insertnationalcontent').load(loadlink, function() {
        $('#insertnationalcontent .lightbox').remove();
    });