Использование jQuery для динамически добавленного контента

Question

Я новичок в jQuery и javascript. В моем приложении у меня есть список пользователей. Когда конкретный пользователь кликнут из списка, элемент div заменяется подробными сведениями о пользователе динамически. Когда нажимается другой пользователь, я снова заменяю тот же элемент div этими данными пользователя. Таким образом, в то время можно увидеть только одну информацию о пользователе.

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

$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){
$('div.user_info').html(data);
});
});

Это отлично работает и содержание вставляется динамически. У меня есть раскрывающийся список (html select tag) в динамически добавленном контенте. Таким образом, я получаю раскрывающееся меню только тогда, когда я нажимаю на пользователя из списка, и он изменяется, когда я нажимаю на другого пользователя. Я хотел найти значение тега select, используя jquery всякий раз, когда он изменяется. Так что я написал

$('select#assign_role').change(function(){
alert(this.val());
});

Поскольку этот выпадающий добавляется после document.ready, добавив этот скрипт внутри document.ready функция никогда не работал. Я также попытался вставить вышеприведенный скрипт вместе с данными пользователя, которые динамически добавлены. Для моего удивления этот скрипт вообще не вставлен в документ, а остальная часть содержимого HTML вставляется идеально. Я не знаю, могу ли я добавить вставку javascript после загрузки документа. Я не знаю, как я могу использовать jQuery, чтобы узнать значение тега select, который добавляется динамически. Спасибо.

Answer 1

вы хотите JQuery в «живой» функциональность:

$('select#assign_role').live('change',function(){ 
alert($(this).val()); 
}); 

также заметить, что я изменил alert(this.val()); к alert($(this).val()); считая, что this внутри обработчика событий JQuery ссылается на фактический элемент DOM, а не объект JQuery.

Answer 2

Из внешнего вида вашего кода кажется, что вы вставляете фрагмент HTML в этот div. Поэтому, даже если вы связали свое событие с выпадающим списком после загрузки страницы, оно не будет работать, так как вся привязка к событию будет проигнорирована при вставке нового HTML-кода в div. Попробуйте переместить код внутри функции, которая вставляет HTML. Что-то вроде этого:

$('table#moderate_users tr').click(function() { 
    $.get('/moderate/user/'+uid, function(data){ 
    $('div.user_info').html(data); 
    $('select#assign_role').change(function(){ 
     alert(this.val()); 
    }); 
    }); 
    }); 

Answer 3

В IE живая функция не работает для OnChange на <select> элементов.

http://www.neeraj.name/blog/articles/882-how-live-method-works-in-jquery-why-it-does-not-work-in-some-cases-when-to-use-livequery

Вам нужно будет либо добавить выбор затем сделать setTimeout и затем связываются с jquery.bind типа функциональности, или, что я сделал, это когда вы создаете элемент, то просто установите onchange событие обработчик там напрямую.

Если вам не нужна поддержка IE, то функция live работает отлично.