Question

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

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

我在以下地方广泛尝试了以下内容：

AJAX
.load
.ajaxComplete
.complete
.success
.done
我确信还有其他一些人，但是我的大脑太过于害怕处理这个问题，以便记住我迄今为止所做的一切。

我的HTML：

Document.ready

我的JS：

<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>

如果还有其他任何可以帮助我的请求，请告诉我！

提前致谢！

Answer 1

请注意，success和failure是您应该为$.ajax调用提供的选项，而不是返回的承诺。此外，自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
        }
    })
});

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

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

$("#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!"); 
    })
});

Answer 2

您可以尝试同步Ajax请求，演示代码如下：

$(function() {
   $("#CardSearch").bind('submit',function() {
       e.preventDefault();
       sendData = $('#CardName').val();
       reqUrl =  "synergies.php";
       // this will wait until server request complete 
       var ajaxOpt = AjaxSyncRequest(reqUrl, sendData);
       // after complete server request
       ajaxOpt.done(function(data) { 
           $("#Results").html(data); 
       });
   });
});  

function AjaxSyncRequest(reqUrl, sendData) {
     var ajaxData = $.ajax({
           method: "POST",
           url: reqUrl,
           data: {
              data: sendData
           }
      });
    return ajaxData;
 }

从AJAX加载div内容后运行JS

2 个答案: