Question

我有一个使用分页的dataTable。现在当我的页面加载然后我的jQuery运行。它隐藏了TD中的答案，然后如果你单击TD或将鼠标移动到TD，我的其他jQuery代码就会运行。这是代码

(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($)

你们可以看到我正在委派我的两个活动。我知道事件的类型，例如点击和 mouseenter 。但是我想问一下当我们想要在页面加载时或者我们进行分页时运行函数时应该是什么类型的事件？

我的hideAnswers（）方法仅在页面加载时运行。如果我做分页然后由于ajax请求当前DOM Html更改而我的hideAnswers（）方法不运行。那么我如何委托我的hideAnswers（）方法？

谢谢

Answer 1

你负责分页的代码应该能够为你提供一些在加载新页面并插入DOM后调用的回调方法。因此，您可以通过此回调呼叫hideAnswers。在你的情况下，这是不可能的，因为你在一个闭包内定义了这个函数。那么你可以触发一些自定义事件。你会听这个事件：

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

在您的分页回调中，您将按如下方式触发此事件：

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

如何在ajax请求上委托事件

1 个答案: