Question

I have a dataTable that uses pagination. Now when my page loads then my jQuery run. which hides the answers in TD, then if you click on TD or move your mouse to TD the my other jQuery code runs. Here is the code

(function($){

    var hideAnswers = function() {

        $('#faqGrid tr td').each(function(){

            var $td = $(this);
            $td.children('div .answer').hide();

        }); //end of $('#faqGrid tr td').each(fn)

    }; //end of var hideAnswers = function() {}

    hideAnswers();

    /**
     * .delegate( selector, eventType, handler(eventObject) )
     *
     * selector: A selector to filter the elements that trigger the event.
     * eventType: A string containing one or more space-separated JavaScript event types, such as
     * "click" or "keydown," or custom event names.
     *
     * handler(eventObject): A function to execute at the time the event is triggered.
     *
     * Description: Attach a handler to one or more events for all elements that match the selector,
     *  now or in the future, based on a specific set of root elements.
     */

    $("#faqGrid").delegate("td", "click", function() {

        var $td = $(this);

        $td.children('div .answer').animate({

           opacity: 'toggle',
           height: 'toggle'

        }, 'slow');

    }); //end of $("#faqGrid").delegate("td", "click", fn());

     /**
      * mouseenter and mouseleave only triggered when the mouse first enters the <div> and
      * finally leaves it. IF you consistently want the mouse event in a div, then use mouseover(fn)
      */
     $('#faqGrid').delegate('td div.question', 'mouseenter', function(event){

         // current div
         var $div = $(this);

         //Find current div parent which is td. So we can check for answer div for this td.
         //Only travels a single level up the DOM tree.
         var $td = $div.parent();

         $td.addClass('hover');

         // create tooltip div
         var $tooltipDiv = $('<div class="tooltip"></div>');

         // find current div class attributr value
         var divClass = $div.attr('class');

         if (divClass == 'question'){

             // Find <div class=answer /> for this td
             var $answerDiv = $td.find('div.answer');

             // If answer div is hidden then only show the tooltip
             if ($answerDiv.is(':hidden')) {

                 /**
                  * This line will create something like this.
                  *
                  *     '<div class="tooltip">click to see the answer</div>'
                  *
                  * Then when mouse leave, we will get this text using .html() and set it to
                  * to span title attribute value. So when next time mouse enter then we have the
                  * title text.
                  *
                  * $(this).find('span').attr('title',$('.tooltip').html());
                  */
                 $tooltipDiv.text("Click to see the answer").appendTo('body');

                 //change tooltip position
                 var tooltipX = event.pageX - 8;
             var tooltipY = event.pageY + 8;
             $('div.tooltip').css({
                                    top: tooltipY,
                                    left: tooltipX
                                     }
                                  ); //end of .css

                 //hide the tooltip with fadeOut effect in 3 sec
                 $('div.tooltip').fadeOut(3000);

                 //$(this).find('span').attr('title',$('.tooltip').html());

             } else { //end of if ($answerDiv.is(':hidden'))

             }

         } //end of if ($div.attr('class') == 'question'..)

     }).mousemove(function(event){

         //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        var tooltipX = event.pageX - 8;
    var tooltipY = event.pageY + 8;

        $('div.tooltip').css({
                              top: tooltipY,
                              left: tooltipX
                             }
                        ); //end of .css

    }).mouseleave(function() {

        //Put back the title attribute's value
        //$(this).find('span').attr('title',$('.tooltip').html());

        //Remove the appended tooltip template
        $(this).parent().removeClass('hover');

        $('div.tooltip').remove();

    });

})(jQuery); //end of (function($)

You people can see i am delegating my two events. I know the type of the event, like click and mouseenter. But i want to ask what should be the event type when we want to run function when page loads or when we do pagination?

My hideAnswers() method only runs when page loads. If i do pagination then due to ajax request current DOM Html changes and my hideAnswers() method don’t run. So how can i delegate my hideAnswers()method also?

Thanks

Answer 1

Well your code responsible for pagination should be able to provide you with some callback method called once new page is loaded and inserted into DOM. So you could call your hideAnswers from this callback. In your case it’s not possible because you defined this function inside a closure. So then you could trigger some custom event. You would listen for this event:

$("#faqGrid").delegate('td', 'hideAnswers', hideAnswers);

And inside your pagination callback you would trigger this event as follows:

$("#faqGrid").trigger('hideAnswers');