Jquery live 似乎不适用于嵌套调用 [英] Jquery live does not seem to work in nested calls
问题描述
我遇到了 jquery live 函数不能始终为我工作的问题(或者我认为的).
I am encountering a problem of jquery live function not consistently working for me (or that what I think).
我有相同的 html 表单，用于添加新评论和编辑现有评论；此表单通过 GET 调用在服务器端使用 php 代码传播.这两个表单根据选项卡选择显示在两个不同的选项卡中(tab1:添加评论，tab2:列出评论；tab3:编辑在 tab2 中选择的评论).添加评论"表单作为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:
- 我使用了 $("input[name='sample_radio']") 但这不适用于 tab3 的形式，因为它总是以 tab1 的形式结束
- 通过使用 $("input.sample_radio") 我假设所有类型为sample_radio"的类都可以工作，但它也不起作用.
- live 应该在 jquery 调用后将事件绑定到添加到 DOM 树中的新元素，但对我来说似乎不是这样.
谢谢
听从马克·舒尔泰斯的建议
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
这篇关于Jquery live 似乎不适用于嵌套调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
