使用jquery在AJAX中加載AJAX

我遇到以下代碼的問題。它工作得很好，直到它開始將更改應用到第一個ajax函數中加載的html。使用jquery在AJAX中加載AJAX

基本上我試圖在另一個嵌套一個ajax調用。

$(document).on("click", '#advertiser-email-submit', function(event) { 
    $(this).blur(); 
    var email = $("#advertiser-email").val(); 

    $(".marketing").hide().html(""); 
    $("#stats-container").hide().html(""); 
    $("#advertiser-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_white_green.gif"></div><div class="col-md-5"></div></div>').show(); 

    $.post("https://www.example.com/advertisers/interface/email/submit", { 
      email: email 
     }, 
     function(data, status) { 
      if (status == "success") { 
       if (data.length > 0) { 
        //Load advertiser interface 
        $("#advertiser-container").hide().html(data).show(); 

        //Load exchange visits list 
        var advertiser_id = $("#advertiser-overview").data("advertiser-id"); 

        //THIS IS WHERE IT STARTS TO FAIL 

         $("#exchange-visits-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_black_white.gif"></div><div class="col-md-5"></div></div>').show(); 
         $.post("https://www.example.com/advertisers/interface/exchange/visits/list", { 
           advertiser_id: advertiser_id 
          }, 
          function(data, status) { 
           if (status == "success") { 
            if (data.length > 0) { 
             $("#exchange-visits-container").hide().html(data).show(); 
            } 
           } 
          }); 
       } 
      } 
     }); 
    return false; 
});

來源

2016-02-29 Amy Neville

* *這種方式實際上失敗了？怎麼了？當你調試它時，觀察到的行爲與預期的行爲有什麼不同？ – David

刪除包裝代碼的內部$（function（）{...}）。它是一個文檔準備處理程序。 – Jasen

@大衛它只是沒有做什麼 –

你包裹在文檔中的內部函數準備，而不是僅僅調用AJAX

$(document).on("click", '#advertiser-email-submit', function(event) { 
    $(this).blur(); 
    var email = $("#advertiser-email").val(); 

    $(".marketing").hide().html(""); 
    $("#stats-container").hide().html(""); 
    $("#advertiser-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_white_green.gif"></div><div class="col-md-5"></div></div>').show(); 

    $.post("https://www.example.com/advertisers/interface/email/submit", { 
     email: email 
    }, 
    function(data, status) { 
     if (status == "success") { 
      if (data.length > 0) { 
       //Load advertiser interface 
       $("#advertiser-container").hide().html(data).show(); 

       //Load exchange visits list 
       var advertiser_id = $("#advertiser-overview").data("advertiser-id"); 

        var template = $('#templateId').removeAttr('id'); 
        $("#exchange-visits-container").hide().html(template).show(); 
        $.post("https://www.example.com/advertisers/interface/exchange/visits/list", { 
         advertiser_id: advertiser_id 
        }, 
        function(data, status) { 
         if (status == "success") { 
           if (data.length > 0) { 
           $("#exchange-visits-container").hide().html(data).show(); 
          } 
         } 
        }); 

      } 
     } 
    }); 
    return false; 
});

而且它會更容易調試和清理你的代碼，如果你用這樣的一個模板：

<div id="templateId" style="height:64px;"><div class="col-md-5"> 
    </div><div class="col-md-1"><img src="https://www.example.com/images/spinner_black_white.gif"></div> 
    <div class="col-md-5"></div> 
</div>

，那麼你可以設置你html的這樣簡單：

var template = $('#templateId').removeAttr('id'); 
$("#exchange-visits-container").hide().html(template).show();

這只是一個例子，所以你應該隱藏模板，然後也使其可見

來源

2016-02-29 17:51:39

謝謝，但如果我這樣做，它也會做同樣的事情。什麼都沒發生。 –

你確定它迴歸成功嗎？可能會添加一些錯誤處理程序 –

我不認爲它甚至可以打電話。 $（「#exchange-visits-container」）。hide（）.html（）甚至這條線沒有執行。 –

使用jquery在AJAX中加載AJAX

回答

相關問題