jquery live似乎不能在嵌套调用中工作

Question

我遇到了一个jquery live函数的问题，它不一致地为我工作（或者我认为的）。

我有相同的html表单，用于添加新评论和编辑现有的html表单;这个表单是通过GET调用在服务器端使用php代码传播的。基于选项卡选项，这两种形式显示在两个不同的选项卡中（选项卡1：添加评论，选项卡2：列出评论;选项卡3：编辑在选项卡2中选择的评论）。 “添加评论”表单显示为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. 我用$（“输入[名称=‘sample_radio’]”），但这并没有为TAB3的形式工作，因为它总是在TAB1的形式结束了
2. 通过使用$（“input.sample_radio”）我假设所有'sample_radio'类型的类都可以工作，但它也不起作用。
3. live应该将事件绑定到在jquery调用后添加到DOM树中的新元素，但似乎并非如此。

感谢

---

以下标志Schultheiss

看的建议到.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（），它是专门为解决此问题而提出的，它允许您指定上下文。

看到这个职位上代表的一些注意事项，从布兰登·艾伦：http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

，看到背景下，这个漂亮的一个：http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery