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

如何将通过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>

最佳答案

我已装配好此设置以模拟您的情况。我从未遇到过ID为request的div在DOM中不存在的情况。

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>