Jquery live, похоже, не работает во вложенных вызовах

Я столкнулся с проблемой, когда функция jquery live не работает у меня постоянно (или то, что я думаю).

У меня есть та же HTML-форма, которая используется как для добавления нового комментария, так и для редактирования существующего; эта форма распространяется с использованием кода PHP на стороне сервера через вызов GET. Две формы отображаются на двух разных вкладках (вкладка 1: добавление комментария, вкладка 2: перечисление комментариев; вкладка 3: редактирование комментария, выбранного на вкладке 2) в зависимости от выбора вкладки. Форма «Добавить комментарий» отображается как основное содержимое вкладки 1; однако форма «редактирования» появляется на основе выбора комментария, который необходимо отредактировать в tab2, поэтому предположим, что форма «редактирования комментария» отображается как tab3. Приведенный ниже код отлично работает для tab1, когда форма является основным содержимым этой вкладки; но это не работает последовательно, когда это основное содержимое tab3, которое отображается в зависимости от того, какой комментарий необходимо отредактировать в tab2.

  $("input.sample_radio").live('change',function(){
                            if ($(this).val() == 'no')
                                    $('#sample_table').hide();
                            else if ($(this).val() == 'yes')
                                    $('#sample_table').show();
                            return false;
                            });

Буду признателен, если вы поделитесь со мной некоторыми мыслями. Мои наблюдения были следующими:

  1. Я использовал $ ("input [name = 'sample_radio']"), но это не сработало для формы tab3, потому что она всегда заканчивалась формой tab1
  2. при использовании $ ( "input.sample_radio") Я предполагал, что все классы типа sample_radio будут работать, но он тоже не работает.
  3. live должен связывать события с новыми элементами, добавленными в дерево DOM после вызовов jquery, но, похоже, это не для меня.

Спасибо


Следуя предложению Марка Шультайса

Посмотрите в .delegate (), который был представлен специально для решения этой проблемы, позволяя вам указать контекст.

Мне удалось решить эту проблему, привязав событие к выбранным родительским элементам (tab1 и tab3) радиокнопок, а затем отфильтровав их на основе селектора, который является именем элемента радиокнопки и как показано ниже:

$('#tab1,#tab3').delegate('input[name="policy_radio"]','change',function(){
                            if ($(this).val() == 'no')
                                    $('.policy_table').hide();
                            else if ($(this).val() == 'yes')
                                    $('.policy_table').show();
                            return false;
                            });

Спасибо, что указали мне на этот момент.

1
задан nawar 24 October 2010 в 19:58
поделиться