ajax後觸發js

Question

我有一個包含所有常見元素（html/php，css，js）的頁面，並且通過ajax調用（使用表單）頁面。所有的工作都很好，我對此感到滿意......除了它沒有完成！

Ajax調用是：

$(".view_button").click(function(event) { 
    $("#reportframe").html("Loading..."); 
    var geturl = $("#holder").attr("action"); 
    $.ajax({ 
     url: geturl, 
     type: 'get', 
     dataType: 'html', 
     async: false, 
     data: $('#holder').serialize() 
    }) 
    .done(function(html) { 
     $("#reportframe").html(html); 
     alert("Loaded!"); 
    }); 
}); 

.view_button是表單的提交按鈕，0​​的形式ID和#reportframe是DIV被加載到該頁面。設置geturl的原因是因爲取決於表單中選擇的選項，它將更改表單的'action'屬性以獲取不同的頁面。

有兩件事情，我似乎無法解析：

1. 第一次頁面通過AJAX的「警報」加載不顯示，最jQuery的元素不起作用。但是，第二次（以及後續）頁面通過ajax加載完成時會彈出'alert'，並且有些jquery元素可以工作！

2. 獲取所有jquery在加載頁面中工作！特別是有一個我們加載的工具稱爲'tooltipster' - 這顯然不會被加入，因爲控制檯說'tooltipster不是函數'，即使js文件被調用並加載。

所有js/jquery代碼和文件都在加載頁面的末尾調用。

還有一件事 - 我似乎無法抓住data來顯示它，即使它顯然在ajax中傳輸。有任何想法嗎？

任何見解非常感謝！

Answer 1

如果.view_button元素是提交按鈕，則將提交form。這意味着JS代碼將停止執​​行，頁面將被傳輸。這反過來意味着你的AJAX調用將不會被執行，或者在它完成之前被中止。

爲了解決這個問題，勾你的代碼的submit事件的形式和呼叫preventDefault()所提供的情況下，停止該標準提出，像這樣：

$("#holder").submit(function(e) { 
    e.preventDefault(); 

    $("#reportframe").html('Loading...'); 

    $.ajax({ 
     url: $(this).prop('action'), 
     type: 'GET', 
     dataType: 'html', 
     data: $(this).serialize() 
    }).done(function(html) { 
     $('#reportframe').html(html); 
    }); 
}); 

注意我刪除async: false因爲它被認爲是非常糟糕練習，直到瀏覽器警告你不要在控制檯中使用它。

而且，你用這個AJAX請求到元件以加載遠程HTML，你可以更換$.ajax呼叫與load()代替：

$("#holder").submit(function(e) { 
    e.preventDefault();  
    $("#reportframe").html('Loading...').load($(this).prop('action'), $(this).serialize()); 
});