jQuery Live似乎在嵌套调用中不起作用

jQuery Live似乎在嵌套调用中不起作用

问题描述:

我遇到的问题是jquery live函数不能一直为我工作(或我认为的问题).

I am encountering a problem of jquery live function not consistently working for me (or that what I think).

我有相同的html表单,用于添加新评论和编辑现有评论;这种形式是通过GET调用在服务器端使用php代码传播的.这两种形式显示在基于选项卡选择的两个不同选项卡中(选项卡1:添加注释,选项卡2:列出注释;选项卡3:编辑在选项卡2中选择的注释). 添加评论"表单显示为tab1的主要内容.但是,编辑"表单是根据需要在tab2中进行编辑的注释的选择而出现的,因此,假设编辑注释"表单显示为tab3.当表单是该选项卡的主要内容时,下面的代码可完美地用于tab1;但是当它是tab3的主要内容时,它并不能始终如一地工作,该内容是根据需要在tab2中编辑的注释显示的.

I have the same html form which is used for both adding new comment and editing an existing one; this form is propagated using a php code at the server side through a GET call. The two forms are displayed in two different tabs (tab1: adding a comment, tab2: listing the comments; tab3: edit a comment selected in tab2) based on the tab selection. The "Add comment" form appears as the main content of the tab1; however, the 'edit' form appears based on the selection of the comment that needs to be edit in tab2, so let assume that the "edit comment" form appears as tab3. The below code work perfectly for tab1 when the form is the main content of that tab; but it doesn't work consistently when it is the main content of tab3, which is showed based on which comment need to be edit in tab2.

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

如果您能提供一些想法,我们将不胜感激.我的观察是:

If you can provide me with some thoughts, it would be appreciated. My observations were:

  1. 我使用了$("input [name ='sample_radio']"),但这不适用于tab3形式,因为它总是以tab1形式出现
  2. 通过使用$("input.sample_radio"),我假设所有类型为'sample_radio'的类都可以使用,但也不起作用.
  3. live应该在将jquery调用后将事件绑定到添加到DOM树中的新元素上,但这似乎对我来说不是这种情况.

谢谢

遵循Mark Schultheiss的建议

Following the suggestion of Mark Schultheiss

查看.delegate(),它是通过允许您指定上下文来专门解决此问题的.

Look into .delegate() which was presented specifically to address this by allowing you to specify a context.

我设法通过将事件绑定到单选按钮的选定父项(tab1和tab3),然后根据选择器进行过滤来解决此问题,这是单选按钮元素的名称,如下所示:

I managed to solve this issue by binding the event to the selected parents (tab1 and tab3) of the radio buttons and then filtering based on the selector which is here is the name of the radio button element and as shown below:

$('#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;
                            });

感谢您指出这一点.

使用.live,您遇到了挑战之一.当您更改选择上下文时,将阻止其正常工作.

By using .live you have ran into one of it's challenges. When you change the selection context you prevent it from working properly.

查看.delegate(),它是通过允许您指定上下文来专门解决此问题的.

Look into .delegate() which was presented specifically to address this by allowing you to specify a context.

请参阅此帖子,以了解布兰登·亚伦(Brandon Aaron)代表的一些注意事项: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

See this post for some notes on delegate from Brandon Aaron: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

并在上下文中看到一个不错的示例: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery

And see this nice one on context: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery