Question

我正在转换我们在门户网站（Liferay）中使用的旧jQuery版本1.2.6代码。以前我们使用livequery插件向动态添加的DOM对象添加事件。现在这是jQuery内置的一个功能（on（）函数）。我知道了。

但是，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”））它会显示一个对象，但是警报（$（“。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'发布的事件进行布线。以下是我们用于在所有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.
    });
}):

Answer 2

首先，在这种情况下，您可能希望使用ID而不是类，以确保您专门指代单个元素。

您的警报将确定此代码是在之前还是之后执行。这可以解释您返回一个对象，但没有值。将其放在值分配之后，无论是在页面上还是在时间上。

以下工作正常（http://jsfiddle.net/4WHyE/1/）：

<input id="myid"/>

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

如果必须使用类，则取决于您是要单独设置每个类元素还是将所有类元素设置为相同的值。如果你希望它们都具有相同的值，只需在上面的例子中用class替换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

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

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

3 个答案: