jQuery：將所有ready（）規則應用於新元素（不是在談論live（）或on（））的技巧或最佳實踐

我對jQuery ready()函數有一些標準插件綁定，可以對所有新請求都正常工作。現在，隨着我們嚮應用程序添加越來越多的ajax，這些新元素將留在初始綁定之後。jQuery：將所有ready（）規則應用於新元素（不是在談論live（）或on（））的技巧或最佳實踐

規則示例：

$(function() { 
    $('.date').datepicker({ showOn: 'button', buttonImage: "cal.gif" }) 
       .blur(function (e) { 
        $(this).val(formatFecha($(this).val())); 
       }) 
    $('.ui-datepicker-trigger').attr("tabindex", "-1"); 
    $(".decimalnumber").numpadDecSeparator({ separator: "," }) 
        .numeric(",") 
        .focus(function() { if ($(this).val() == '0,00' || $(this).val() == '0') $(this).val(''); }); 
    $(".integernumber").numeric().focus(function() { if ($(this).val() == '0') $(this).val(''); }); 
    $(".spinner").spinner({ min: 0, max: 10000000 }); 
    $(".jbtn").button(); 

    .......

我不談論綁定事件live()功能，因爲這不是事件。

因爲我認爲這是相當普遍的，我想知道你們是如何做到這一點的。

來源

2012-12-19 Eduardo Molteni

我結束了使用的@Blazemonger代碼改良版本：

您只需按約定投入到新的元素類的名稱。

function initialize(parent) { 
     $(parent + ' .date').datepicker({ showOn: 'button'}) 
     $(parent + ' .autocomplete').each(function (i, el) { 
      addbuttonautocomplete(el); 
     }); 

     .... 
     // remove the class to avoid double initialization 
     $(".newelements").removeClass('newelements'); 
    } 

    $(document).ready(function() { 
     initialize('body'); 
    }); 

    $.ajax({ 
     // url, data, etc. 
     success: function() { 
      initialize('.newelements'); 
     } 
    });

概念證明：http://jsbin.com/ireguj

來源

2012-12-19 15:02:26

將這些函數放在一個單獨的函數中。在document.ready和任何其他需要重新加載的時間調用THAT功能。

function initialize() { 
    // do stuff; 
} 

$(document).ready(function() { 
    initialize(); 
}); 

$.ajax({ 
    // url, data, etc. 
    success: function() { 
     initialize(); 
    } 
});

要知道，一些插件，如幻燈片，改變DOM，可能需要您重新初始化之前調用destroy方法或選項。

來源

2012-12-19 14:23:52 Blazemonger

那不是重新呼叫，在其上已經初始化，可能導致麻煩的所有元素重新初始化的東西？ – jAndy

正在考慮這一點，但必須適用於新的元素（因爲有些東西不能初始化兩次） –

@jAndy剛剛添加了一條關於這個的評論。有些人會，有些人不會，只有開發人員才能知道哪個是哪個。 – Blazemonger

我將所有在init（）函數中指定的代碼，並調用它的document.ready和阿賈克斯成功/失敗，這取決於我想要做的

來源

2012-12-19 14:24:39 Dogoku

我使用JavaScript庫稱爲TerrificJS。它允許我輕鬆地加載ajax的html，並初始化與之一起使用的javascript。但並不那麼簡單。 TerrificJS依賴於命名約定。

比方說，AJAX返回下面的HTML：

<div class="mod modMyInteractiveModule">Cool stuff, buttons etc here</div>

然後我有一個會掃描阿賈克斯成功返回的HTML和挑選出與CSS類的所有元素的輔助功能MOD和modX。該助手檢查是否存在名爲X的JavaScript類，或者保留上面的示例MyInteractiveModule。

Tc.Module.MyInterActiveModule = function() { 
    // Bindings go here 
}

我希望我能提供一些線索，即使你不想使用TerrificJS和實施自己的解決方案。 TerrificJS示例可以在http://terrifically.org/api/sandbox/下找到動態添加新的窗口小部件。

來源

2012-12-19 14:32:01

很高興知道。將調查。 –

jQuery：將所有ready（）規則應用於新元素（不是在談論live（）或on（））的技巧或最佳實踐

回答

相關問題