Question

如何将通过AJAX接收的HTML元素添加到之前通过AJAX添加的另一个HTML元素？我尝试使用.append但没有工作：

实施例

$.ajax({ (...), success: function() { $('.padding').append('<div id="request">Foo</div>') } });

以上工作正常，因为.padding最初是在页面上加载的。但是当我尝试

时

$.ajax({ (...), success: function(data) { $('#request').append('<div class="description">Bar</div>') } });

不工作。为什么以及如何以正确的方式做到这一点？

下面是我的.padding内容：

<div class="padding">
    <!-- Below, HTML result from first AJAX  -->    
    <div class="ui attached segments" id="request"> 
        <div class="ui right center aligned segment" id="header"> 
            <h4 class="ui gray header"> P2017003</h4>
        </div>
        <div class="ui stackable three item menu segment">
            <div style="justify-content: flex-start" class="item">
                <button class="ui button">
                    <i class="left chevron icon"></i>
                    Voltar
                </button>
            </div>
            <div class="item">
                <!--Buttons AJAX-->
                <div class="two ui red inverted small buttons segment-controller">
                    <button id="detalhes" class="ui active button">
                        Detalhes
                    </button>
                    <button id="acompanhar" class="ui button">
                        Acompanhar
                    </button>
                </div>
            </div>
            <div style="justify-content: flex-end" class="item">
                <button class="ui button">Imprimir</button>
            </div>
        </div>
        <div class="ui main segment">
            P-2017-003
        </div>
    </div>
</div>

Answer 1

我已经完成了这个设置来模拟你的情况。我从来没有遇到过DOM中没有id为request的div的情况。

function getDataA() {
  return $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1'
  }).then(result => {
    $('.padding').append('<div id="request">Call A finished</div>');
  });
}

function getDataB() {
  return $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/2'
  }).then(result => {
    if ($('#request').length === 0) {
      console.log('no request element found');
    }
    $('#request').append('<div class="description">Call B finished</div>');
  });
}

getDataA()
  .then(getDataB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="padding"></div>

我的猜测是你的第二次通话是在第一次通话之前完成的。也许你的代码是这样的：

getDataA();
getDataB();

现在，您首先取决于哪个通话结束。当呼叫B首先完成你的代码中断时，当呼叫A完成时，你很幸运。

如果需要，您可以并行运行这两个请求，它需要使用$.when()。

function getDataA() {
  return $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1'
  });
}

function getDataB() {
  return $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/2'
  });
}

$.when(getDataA(), getDataB())
  .then(function(resultA, resultB) {
    $('.padding').append('<div id="request">Call A finished</div>');
    $('#request').append('<div class="description">Call B finished</div>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="padding"></div>

我已尝试使用您提供的HTML，但我仍然无法重现这种情况。

function getDataA() {
  return $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1'
  }).then(result => {
    $('.padding').append(`
        <!-- Below, HTML result from first AJAX  -->    
    <div class="ui attached segments" id="request"> 
        <div class="ui right center aligned segment" id="header"> 
            <h4 class="ui gray header"> P2017003</h4>
        </div>
        <div class="ui stackable three item menu segment">
            <div style="justify-content: flex-start" class="item">
                <button class="ui button">
                    <i class="left chevron icon"></i>
                    Voltar
                </button>
            </div>
            <div class="item">
                <!--Buttons AJAX-->
                <div class="two ui red inverted small buttons segment-controller">
                    <button id="detalhes" class="ui active button">
                        Detalhes
                    </button>
                    <button id="acompanhar" class="ui button">
                        Acompanhar
                    </button>
                </div>
            </div>
            <div style="justify-content: flex-end" class="item">
                <button class="ui button">Imprimir</button>
            </div>
        </div>
        <div class="ui main segment">
            P-2017-003
        </div>
    </div>
    `);
    const
      trigger = document.getElementById('detalhes');
    trigger.addEventListener('click', getDataB);
  });
}


function getDataB() {
  return $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/2'
  }).then(result => {
    if ($('#request').length === 0) {
      console.log('no request element found');
    }
    $('#request').append('<div class="description">Call B finished</div>');
  });
}


const
  trigger = document.getElementById('fill-padding');
trigger.addEventListener('click', getDataA);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="fill-padding" type="button">Fill padding</button>
<div class="padding">
</div>

Answer 2

所以，问题是jQuery还没有更新它的内部结构。

有时会在追加元素并尝试立即找到它们时发生这种情况。

而是做其中一个：

使用jQuery.find（）代替（例如：$（“body”）。find（“＃id”））
将元素html存储为jQuery对象：

var html ='嗨'; var elem = $（html）;
“立即累积”html，并立即附加所有内容。

var html =''; $ .ajax（{（...），success：function（）{ html + ='Foo'; $ .ajax（{（...），success：function（data）{ html + ='Bar'; $（ '填充'）追加（HTML）; } }）; } }）;

如何将通过ajax加载的元素附加到之前通过ajax加载的另一个元素？

实施例

2 个答案: