Jquery live 似乎不适用于嵌套调用

Question

我遇到了 jquery live 函数不能始终为我工作的问题（或者我认为的）。

我有相同的 html 表单，用于添加新评论和编辑现有评论；此表单通过 GET 调用在服务器端使用 php 代码传播。这两个表单根据选项卡选择显示在两个不同的选项卡中（tab1：添加注释，tab2：列出 cmets；tab3：编辑在 tab2 中选择的注释）。 “添加评论”表单作为tab1的主要内容出现；但是，“编辑”表单是根据在 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 应该将事件绑定到 jquery 调用后添加到 DOM 树中的新元素，但对我来说似乎不是这样。

谢谢

---

听从马克·舒尔泰斯的建议

查看 .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;
                            });

感谢您指出这一点。

Answer 1

通过使用 .live，您遇到了其中一项挑战。当您更改选择上下文时，您会阻止它正常工作。

查看 .delegate()，它通过允许您指定上下文来专门解决这个问题。

有关 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