使用jQuery修改加载时动态添加的元素

Question

我正在转换我们与门户(Liferay)一起使用的旧的jQuery版本1.2.6代码。以前，我们使用livequery插件将事件添加到动态添加的DOM对象中。现在这是内置到jQuery ( on()函数)的特性。我已经弄清楚了。

然而，livequery中也有一个特性，它允许我们在加载时修改这些动态加载的对象(即不绑定到某些事件)：

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

在我们的门户中加载ajax portlets时，我并不控制代码，因此在创建时我无法修改内容。

我试过几件事都没有用。下面是我认为可以工作的jQuery，但不起作用。我将jQuery添加到portlet中，以便将其加载到portlet的底部，并将jQuery添加到文件中。

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

..。

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

这不管用。如果我写了一个警告($(“.myTextBox”))，它会显示一个对象，但是警告($(“.myTextBox”).val())是未定义的。

有什么办法能让我工作吗？

Answer 1

根据我所读到的，您希望将事件连接到尚未添加到DOM中的项，而这些项在您进行连接函数激发时还没有被添加。我还读到您正在升级到最新版本的jquery。

如果您正在使用jquery 1.7+，则.on()方法应该为您提供此功能。如果您使用的是1.2.6到1.7之间的东西，则需要使用.live()方法来实现这种行为。

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

或者，你可能想要混合到一些AUI中去做你在Liferay 'allPortletsReady‘发布事件上的连线。下面是一些代码，用于在所有portlets完成加载后将项目连接起来：

//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.
    });
}):

Answer 2

首先，在本例中，您可能希望使用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)
});

Answer 3

您可以使用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

顺便说一句，我不推荐这个。