jquery函數和ajax的最佳實踐

我是新來的ajax，並且想要最好地理解如何編寫我的jQuery代碼，以便通過ajax調用頁面，我的jQuery函數（簡單的東西，如幻燈片和疊加）仍然會工作。jquery函數和ajax的最佳實踐

以下是我目前正在做的工作，使我的jQuery工作在沒有ajax的獨立頁面上。

$('.microContentWrap').click(function(){ 

    //perform some functions 

});

爲了使這項功能相同工作時，該頁面已通過AJAX加載，我重複我的代碼，並將其綁定到一個名爲「Ajax的包裝」的div正常加載這個頁面上。沒有這一步，上面的代碼就不會在ajax頁面上執行。

$("ajax-wrapper").on("click", ".microContentWrap", function() { 

    //exact same functions as above 

});

這兩件事情都有效，但這是最有效的方式嗎？似乎重複性爲我的文件中的每個單一功能執行這兩個步驟的過程。

來源

2017-07-06 Ryan Swanson

這是因爲微內容被破壞，再加入我猜，這意味着它是一個動態的元素，這通常意味着你綁定的靜態父單擊事件運行FNC – ThisGuyHasTwoThumbs

什麼過程分爲兩個步驟？用第二種方法替換第一種方法。這是任何一種方式。 – David

*「兩步法」*是什麼意思？幾乎看起來你沒有提供足夠的信息來幫助 – charlietfl

$("ajax-wrapper").on("click", ".microContentWrap", function() { 

    //exact same functions as above 

});

是說：「當我‘AJAX-包裝’中單擊檢查，看看是否我點擊的元素是‘microContentWrap’，如果是，則執行該功能」。這種方法的好處是，當你綁定click甚至listener時，'microContentWrap'不需要存在。

另一種方法是將事件偵聽器添加到您的ajax回調函數中的'microContentWrap'。例如：

$.ajax({ 
    url:"getvalue.php", 
    success:function(data) { 
     $('body').append('<div class="microContentWrap"></div>'); 
     $('.microContentWrap').click(function(){}); 
    } 
    });

來源

2017-07-06 16:26:39 Pat

第二種方法是我們在業界稱之爲壞主意。主要是因爲每次你做這個Ajax調用時，都會添加另一個事件處理程序，並且之前附加的一個事件處理程序被留下來，可能會泄漏內存。更好地使用第一個選項。 –

我的意思是說，把事件綁定放在一個函數中是一樣的：「每次你做這個函數調用時，都會添加另一個事件處理函數......」如果他只計劃在_successfully_上調用ajax一次 - 沒有看到這個問題。第一種方法是「我真的不知道這個元素何時會存在或不存在」，其次是「我確切知道這個元素何時存在或不存在」。第二種方法更令人聯想到依賴注入imo。 – Pat

我必須同意@MikeMcCaughan。每一次成功的AJAX調用都會綁定更多的事件處理程序。這是一般的反模式，並且與依賴注入無關（依賴注入通常檢查依賴關係是否已被加載，如果是，則不會重新加載）。最好的方法是簡單地監聽事件冒泡到保證在運行時存在的父代（第一種方法）。它不在乎元素是否存在。它只是監聽事件，並檢查事件是否由'.microContentWrap'發出。這樣更有效率。 – Terry

解決方案其實很簡單，我只是不理解綁定。我遇到的問題是ajax-wrapper在microContent進入後被破壞。在其他非ajax頁面上沒有ajax-wrapper，這就是爲什麼我認爲需要兩個函數。通過綁定到身體，我消除了這個問題。

$("ajax-wrapper").on("click", ".microContentWrap", function() { 

    //exact same functions as above 

});

來源

2017-07-06 20:49:48

jquery函數和ajax的最佳實踐

回答

相關問題