click function call with $(this) from another function in javascript/jquery

Question

I have a click function which is given below

$('.page-nav li').click(function(event){

    console.log("clickedTab-page-nav-first-before set ="+Session.get('clickedTab'));

    Session.set('clickedTab',event.target.id);
      //var sel = event.prevUntil("[class*=active]").andSelf();
    var sel = $(this).prevUntil("[class*=active]").andSelf(); //find all previous li 
                                                              //of li which have
                                                              //class=active
    sel = sel.add(sel.eq(0).prev()); // include the  that li also(Now all li elements).                      
    sel.removeClass('active'); //Remove the active.
      //sel = event.nextUntil("[class*=active]").andSelf(); //Also for top to bottom 
                                                            //(Viceversa)
    sel = $(this).nextUntil("[class*=active]").andSelf();
    sel = sel.add(sel.eq(-1).next());
    sel.removeClass('active');
      //event.addClass('active');
    $(this).addClass('active'); //Now add class active for the clicked li
    var rightcontent="";

    console.log("clickedTab-page-nav-second-after set = "+Session.get('clickedTab'));

    switch($(this).attr('id')){
            case  'rfq':
               .......
               .....
        }
});

Then next is I want to call this click function from another place

$(document).ready(function() {
     console.log("clickedTab-page load = "+Session.get('clickedTab'));
     if(Session.get('clickedTab')!=null||Session.get('clickedTab')!= undefined){
         alert("Got It");
         //$('.page-nav li').click(event);
         $('.page-nav li').click(); //this is not working
     }
});

Now the problem is page click function in if condition is not working. However I got the alert. Any help is highly appreciated. Thanks in advance...

Answer 1

You need to put $('.page-nav li').click(function(event){ inside document.ready and before your $('.page-nav li').click(); . Because if you call .click when the DOM is not ready, there are chances that there is no event handler attached

If you don't put $('.page-nav li').click(function(event){ inside document.ready OR you're dealing with dynamically created elements. You need delegated event $(document).on("click",".page-nav li",function(event){

From $.on

Answer 2

you are not really using the event parameter in your function and you state you wish to call it outside of an event chain so you could change it to be a regular function

var setupClicktab = function(id){

    console.log("clickedTab-page-nav-first-before set ="+Session.get('clickedTab'));

    Session.set('clickedTab',id);
    ...
}

the you'd use it like:

$('.page-nav li').click(function(event){return setupClicktab(event.target.id);});

and in document ready

setupClicktab.Call($('.page-nav li'),Session.get('clickedTab'));

The latter call class it in the context of the selection (that is this inside the function will refer to the selection(1). It also passes the value stored in the session variable in as the id.

a side note. Your test

 if(Session.get('clickedTab')!=null||Session.get('clickedTab')!= undefined)

could simply be

if(Session.get('clickedTab'))

Unless you might store either an empty string, zero or the boolean value false in that variable. But seeing how it's used that's unlikely since they are all invalid values for the id attribute

(1)This is slightly different than in the click event where it refers to the DOM element)