javascript - 从 AJAX 加载 div 内容后运行 JS

Question

我的问题有很多建议的答案，但即使我找到了所有答案，我似乎也无法找到任何答案。我可以通过在代码的执行中添加延迟来使 JS 工作，但我不能依赖延迟来在 div 完成加载后执行 JS < strong>HTML。

我正在创建一个页面，用户可以在其中搜索项目，结果使用 AJAX 显示在 div 中。在 div 的 html 完成加载后，我需要一些 JS 来运行。一些结果数据将被隐藏，直到用户点击它。完成此操作的 JS 代码是我在 div 完成加载后尝试运行的代码。

我在任何地方都没有运气地广泛尝试了以下内容:

• .load
• .ajaxComplete
• .complete
• .success
• .done
• Document.ready
• 我敢肯定还有其他一些人，但我的大脑因处理这个问题而疲惫不堪，无法记住我到目前为止尝试过的一切。

我的 HTML:

<form name ="CardName" method="post" action="">
<div "class="w2ui-field">
<div> <input type="list" Name="CardName" id="CardName" style="width: 80%;"></div>
</div>
<div class="w2ui-buttons">
<input type="submit" name="search" style="clear: both; width:80%" value="Search" class="btn">
</div>
</form>
<div class="Results" id="Results" name="Results"></div>

我的JS:

  $(function() {
    $("#CardSearch").bind('submit',function() {
      var value = $('#CardName').val();
        $.ajax({
           method: "POST",
           url: "synergies.php",
           data: {value}
        })
        .success(function(data) {
         $("#Results").html(data);
        })
        .complete(function() {
         alert("div updated!"); //Trying to run JS code AFTER div finishes loading
        });
       return false;
    });
  });

如果有任何其他可以帮助完成此请求的信息，请告诉我!

提前致谢!

Answer 1

请注意，success 和 failure 是您应该提供给 $.ajax 调用的选项，而不是返回的 promise 。此外，自 jQuery 1.7 以来，bind 已被弃用，取而代之的是 on。最后，您需要为要发布到 PHP 页面的值提供一个键，以便可以通过 $_POST 检索它。试试这个:

$("#CardSearch").on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        method: "POST",
        url: "synergies.php",
        data: {
            CardName: $('#CardName').val()
        },
        success: function(data) {
            $("#Results").html(data);
        },
        complete: function() {
            alert("div updated!"); //Trying to run JS code AFTER div finishes loading
        }
    })
});

然后您可以使用 $_POST['CardName'] 检索在您的 synergies.php 文件中发送的值。

如果你更喜欢使用返回的 promise 提供的方法，你可以像下面那样做，尽管结果是相同的。

$("#CardSearch").on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        method: "POST",
        url: "synergies.php",
        data: {
            CardName: $('#CardName').val()
        }
    }).done(function(data) {
        $("#Results").html(data);
    }).always(function() {
        alert("div updated!"); 
    })
});