[SOLVED] Jquery live does not seem to work in nested calls

Question

Hi,

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

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. I used $("input[name='sample_radio']") but this didn't work for the form of tab3 because it always end up at the form of tab1
2. by using $("input.sample_radio") I assumed all the classes of type 'sample_radio' would work, but it not working either.
3. live is supposed to bind events to the new elements added to the DOM tree after jquery calls, but it seems this is not the case for me.

Thanks

---

Following the suggestion of Mark Schultheiss

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

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;
                            });

Thanks for pointing me to this point.

Answer 1

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

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

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

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