Ajax調用後執行不顯眼的Javascript

我想使用John Resig's漂亮的日期用一些很好的閱讀時間規格替換我醜陋的時間戳。所以我想過使用下面的不顯眼的HTML標記：Ajax調用後執行不顯眼的Javascript

<span data-type="prettyDate">25.04.2012 10:16:37</span>

Acording來，我用下面的JavaScript/jQuery來美化日期：

$(function() { 
    $('[data-type="prettyDate"]').prettyDate(); 
}

我的問題是，我不知道如何處理使用ajax加載的標記，因爲這不會被捕獲，因爲它在DOM準備事件觸發時尚不存在。使用on handler來回應「ajaxed」元素上的事件非常容易。但這不是一個事件。

來源

2012-04-27 Towa

爲了做這種事情，我通常會在我每次加載某個東西時調用「checkAll」方法（例如在ajax回調中）。 – 2012-04-27 16:03:55

我的一位同事創建了一個叫做liveReady的jquery插件，它結合了$ .read和$ .live的行爲。這正是我正在尋找的：http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/ – Towa 2013-04-23 13:21:59

你必須每個Ajax響應被添加到DOM之後調用.prettyDate()。一個簡單的方法是使用ajaxComplete設置一個全局的complete處理程序。

來源

2012-04-27 16:04:29 bfavaretto

我希望有一個更好的解決方案，但副作用更少，但我想用全局ajaxComplete是最好的方法。 – Towa 2012-04-30 09:05:03

@Towa，'ajaxComplete'是一個「全局」ajax事件，它被廣播給DOM中的所有元素。所以你可以用'.bind'或'.on'將它綁定到一些高級元素（比如'document'）。請參閱[文檔]（http://docs.jquery.com/Ajax_Events）。 – bfavaretto 2012-04-30 16:34:42

您可以將此代碼合併到您的ajax成功回調函數中。當ajax完成並更新頁面時，還需要運行代碼來對日期進行優化。

來源

2012-04-27 16:03:35

您可以使用jQuery將動態內容之前，它實際上被插入到文檔中，是這樣的：

success: function(html) { 
    var $html = $(html); 
    $html.find('[data-type="prettyDate"]').prettyDate(); 
    $(somewhere in document).append($html); 
}

來源

2012-04-27 16:04:17

它可能會得到一種討厭的寫這個每一個AJAX調用。 – 2012-04-27 16:07:06

這是.on() is for的東西之一。（在過去的日子裏，.live() would have been used）

來源

2012-04-27 16:05:29

如何？你會在什麼事件上綁定這個？ – 2012-04-27 16:06:42

@dystroy我會從Ajax成功中觸發一個自定義事件，但是否有意義取決於應用程序的上下文。（我傾向於行爲抽象，所以依賴於一種pub/sub模型，但這取決於應用程序的複雜性，只需在「成功」回調中做到這一點顯然更容易，更直接。） – 2012-04-27 16:11:06

你想要做什麼來獲得最好的性能是有一個函數，它會從ajax回調函數返回時調用數據。這樣，您可以在將它們添加到DOM之前對其日期進行優化。

您不想每次都調用DOM中元素的漂亮日期，因爲您將處理日期已經完成。

所以，這樣的事情。

$.ajax({ 
    url:'someurl', 
    success: function(data) { 
    var $content = $(data).find('[data-type="prettyDate"]').prettyDate(); 
    $('#mycontainer').append($content); 
    } 
});

或者，你打電話

function prettify(data) { 
    return $(data).find('[data-type="prettyDate"]').prettyDate(); 
}

甚至更好勾入Ajax調用所以它是針對所有HTML內容進行

來源

2012-04-27 16:07:18 GillesC

已經有一些案件的輔助函數我需要在每次AJAX調用後執行某些代碼。我不確定它是否被認爲是「正確」的解決方案，但我只是決定創建我自己的包裝方法，並在需要提出AJAX請求時使用它。它通常看起來像這樣：

AJAXLoadData: function (url, data, successCallBack) { 
    $.ajax({ 
     type: "GET", 
     data: data, 
     url: url, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      // Code I want to execute with every AJAX call 
      // goes here. 

      // Then trigger the callback function. 
      if (successCallBack) successCallBack(msg); 
     }, 
     error: function (msg) { 
      alert("Server error."); 
     } 
    }); 
}

在我的情況這使得它特別方便創建一個JavaScript緩存系統的靜態HTML文件。

來源

2012-04-27 16:10:47

事件是更適合於此，特別是http://api.jquery.com/category/ajax/global-ajax-event-handlers/ – Esailija 2012-04-27 16:28:56

在某些情況下，這可能是正確的，但您可能需要一種技術，允許您繞過附加功能在特殊情況下調用。我的解決方案可以輕鬆實現，因爲沒有什麼能夠阻止你直接調用jQuery的$ .ajax方法。 – 2012-04-27 17:24:49

Ajax調用後執行不顯眼的Javascript

回答

相關問題