Изменение динамически добавленных элементов при загрузке с использованием jQuery

Question

Я конвертирую старый код jQuery версии 1.2.6, который мы используем с нашим порталом (Liferay). Раньше мы использовали плагин livequery для добавления событий к динамически добавленным объектам DOM. Теперь это функция, встроенная в jQuery (функция on()). Я понял это.

Однако, существует также возможность в livequery, что позволило нам изменить эти динамически загружаемые объекты на нагрузке (т.е. не привязаны к определенным событиям):

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

Я не контролирую код при Аякса портлетов загрузитесь на нашем портале, поэтому я не могу изменять контент при его создании.

Я пробовал несколько вещей безрезультатно. Вот тот, который, как я думал, будет работать, но нет. Я добавил jQuery в свой портлет, чтобы он загружался в нижней части портлета 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». Вот код, мы использовали для проволочных до деталей, когда все портлеты закончена загрузка:

//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

Во-первых, вы, вероятно, захотите использовать идентификатор вместо класса в этом случае, чтобы убедиться, что вы ссылаетесь конкретно на один элемент.

Где ваше оповещение будет определять, выполняется ли этот код до или после. Это объясняет, что вы возвращаете объект, но не имеете значения. Поместите его после присвоения значения, либо на странице, либо временно.

Следующие работает просто отлично (http://jsfiddle.net/4WHyE/1/):

<input id="myid"/> 

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

Если вы должны использовать класс, то это зависит от того, хотите ли вы, чтобы установить каждый класс элемент по отдельности или все с тем же значением. Если вы хотите их все, чтобы иметь такое же значение, просто заменить идентификатор с классом в приведенном выше примере:

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

Если вы хотите установить уникальные значения, вы можете просто перебирать их (http://jsfiddle.net/4WHyE/2/):

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

Answer 3

Ну, вы можете установитьInterval для повторной проверки нового элемента.

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 

Кстати, я не рекомендую это.