Question

I have this page which has tabs. Content in say, tab 1 loads as the default content. when i click on tab 1 it loads content like this:

 $('.options').load('index.php?viewfile='+filee+' .optionsPane', function(data) {
      //inside here i initialized tinymce because the page has tinymce contents.
}

and in that tab 1 there is a form. I have link a js page to the page which contains all the functions. and there i have this code.

  $(document).ready(function(){
      $('.bottommernuform').submit(function () {
        var idval = $(this).attr('id').toString();
        var idvalarr = idval.split("-");
        var region_name= idvalarr[idvalarr.length-1];
        var publish = $('#regionstate-'+region_name).val();
        var swap = $('#swapregion-'+region_name).val();
        var page_url = $('#page-'+region_name).val();
        $.post("index.php", { publish:publish , swap:swap, region_name:region_name}, 
                            function(data) {
                                //alert(data);

                        });

 return false;
});

this works perfectly when i click on forms submit button after loading the page completely. But if i click on tab 1 which loads content from load() $('.bottommernuform').submit() is not getting called .. it refreshes the whole page. Even more after clicking on tab 1, when i tried to save contents in tinymce it gives me an error too. How can i fix this. Please give me a solution. Help much appreciated!
});

Answer 1

There are two possible issues here. First, loading content with .load() will not trigger $(document).ready() so none of your code in $(document).ready() will run after the new code is loaded.

Second, when you use static event handling like:

$('.bottommernuform').submit(fn)

This event handler will only be in operation for '.bottommernuform' objects that existed at the time the event handler was first installed. That means it will not be in operation for content that is loaded in the future.

If you are loading content dynammically and you want previously installed event handlers to work with that new content, then you need to use delegated event handling like this:

$(staticParentSelector).on('submit', '.bottommernuform', fn);

The selector in this jQuery object must be a static parent object of the dynamically loaded .bottommernuform objects (e.g. something that exists at the time your document.ready() code runs and is a parent of all .bottommernuform objects). For best performance, it should be the closest parent to the target as possible that is not dynamically loaded.

Also, remember that to prevent the default behavior of a submit action, you should return(false) from your submit event handler.

Note: .on() was added to jQuery in v1.7. For versions prior to v1.7, you can use .delegate() which works similarly, but has the arguments in a different order.