使用jQuery修改負載上的動態添加元素

我正在轉換我們在門戶（Liferay）中使用的舊jQuery 1.2.6版代碼。之前，我們使用livequery插件將事件添加到動態添加的DOM對象。這現在是jQuery（on（）函數）內置的一個功能。我有這個想法。使用jQuery修改負載上的動態添加元素

然而，也有在的liveQuery，使我們能夠修改負載這些動態加載的對象的特徵（即不依賴於某些事件）：

$(".myTextBox").livequery(function() { $(this).val("initial value"); });

我不控制代碼時的AJAX的portlet在我們的門戶中加載，所以我不能在創建時修改內容。

我試過幾件事情無濟於事。這是我認爲會起作用的那個，但沒有。我將jQuery添加到我的portlet中，以便將它加載到portlet HTML的底部，並將jQuery添加到文件中。

<footer-portlet-javascript>myscript.js</footer-portlet-javascript>

...

$(document).ready(function() { 
    $(".myTextBox").val("initial value"); 
});

這是行不通的。如果我編寫了一個警報（$（「。myTextBox」）），它顯示一個對象，但alert（$（「。myTextBox」）.val（））未定義。

有關我如何工作的任何想法？

來源

2013-10-02 acvcu

從我讀到的內容來看，您希望將事件連接到尚未添加到DOM但尚未綁定的函數觸發時的項目。我還讀到你正在升級到更新版本的jquery。

如果您使用jquery 1.7+，.on（）方法應該爲您提供此功能。如果你使用1.2.6和1.7之間的東西，你需要使用.live（）方法來實現這種行爲。

$(".myTextBox").live('click', function(e){ 
    console.log(this.value); 
});

或者，您可能希望在一些AUI混合做的Liferay的「allPortletsReady」發佈的事件的配線起來。下面是我們用來線了項目的部分代碼，一旦所有的portlet裝載完畢：

//This is the AUI version of on document ready 
// and is just used to form a 'sandbox'(clojure) 
// around our code so the AUI object A is not modified 
AUI().ready(function(A){ 
    //This essentially subscribes the provided function 
    // to the Liferay custom event 'allPortletsReady' 
    // so that when it's fired, the provided function 
    // will be called. 
    Liferay.on('allPortletsReady', function(){ 
     //Do your initialization here 
     myCustomPortletManager.init(); 

     //OR 
     A.one("#mySelector").on('click', function(e){ 
      //do your work here 
     }); 
     //Etc. 
     //NOTE: jQuery ($) is valid inside this sandbox for our 
     //instance. 
    }); 
}):

來源

2013-10-02 15:50:34 Barryrowe

我想在加載時更改這些項目，而不是將它們與事件綁定。我已經做到了。你在哪裏放置AUI（）。ready函數？那可以放在一個portlet的JS中嗎？我試圖避免把JS放在主題中。 – acvcu

瞭解，我意識到，我發佈後，但'allPortletsReady'事件應該給你你需要的。是的，您可以在Portlet的JS中放置AUI（）。ready函數。你可以根據需要在AUI（）。ready（）塊內使用jQuery。我的例子使用AUI .one（）來選擇元素，但是可以用$（「＃mySelector」）。val（'initial value'）替換你的情況。 – Barryrowe

在頁面加載時起作用，但如果刷新Portlet或將Portlet添加到頁面，則不會觸及該JS。我正在使用異步加載的ajax portlet - 並非全部都是。有任何想法嗎？ – acvcu

首先，在這種情況下，您可能希望使用ID而不是類，以確保您特指單個元素。

您的警報將決定此代碼是在執行之前還是之後執行。這將解釋你返回一個對象，但沒有價值。將其放在值分配之後，無論是在頁面上還是暫時。

下面的作品就好了（http://jsfiddle.net/4WHyE/1/）：

<input id="myid"/> 

$('#myid').val('some value') 
alert($('#myid').val())

如果必須使用類的話，就取決於你是否要單獨或全部設置每個類元素爲相同的值。如果你希望他們都具有相同的價值，只需在上面的例子中替換類ID：

<input class="myclass"/> 
$('.myclass').val('myvalue')

如果要設置唯一值，你可以簡單地遍歷它們（http://jsfiddle.net/4WHyE/2/）：

$('.myclass').each(function(index){ 
    $(this).val('value' + index) 
});

來源

2013-10-02 13:50:55

我不能在門戶網站使用一個ID，因爲相同的portlet的多個可以被添加到頁面 – acvcu

如果你想使用類，這也適用，但你會設置所有的值。如果你想設置唯一的值，只需遍歷類元素。我會修改我的帖子以反映這一點。 –

那麼你可以通過setInterval迭代檢查新元素。

setInterval(function(){ 

    var $ele = $('.myTextBox:not(.loaded)'); // find new element that not loaded 
    if($ele.size() > 0){ 
     $ele.each(function(){ 
     // do stuff with elements 
     $(this).val("initial value"); 
     }).addClass('loaded'); // flag this element is loaded 
    } 

}, 200); // set delay as you wish

順便說一句，我不推薦這個。

來源

2013-10-02 14:02:10 Chokchai

這可能會起作用，但看起來好像會讓頁面停止。 – acvcu

是的。那爲什麼我不推薦這個。 :) – Chokchai

使用jQuery修改負載上的動態添加元素

回答

相關問題