1

我正在转换我们与门户 (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");
});

这行不通。如果我写一个 alert($(".myTextBox")) 它显示一个对象，但 alert($(".myTextBox").val()) 是未定义的。

关于我如何开始工作的任何想法？

4

3 回答 3

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.
    });
}):
于 2013-10-02T15:50:34.190 回答
0

那么你可以 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-02T14:02:10.027 回答
0

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

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

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

<input id="myid"/>

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

如果您必须使用类，那么这取决于您是要将每个类元素单独设置还是全部设置为相同的值。如果您希望它们都具有相同的值，只需在上面的示例中将 id 替换为 class：

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

如果您希望设置唯一值，您可以简单地遍历它们（http://jsfiddle.net/4WHyE/2/）：

$('.myclass').each(function(index){
    $(this).val('value' + index)
});
于 2013-10-02T13:50:55.580 回答