0
ページネーションを使用するdataTableがあります。今、私のページがロードされると、jQueryが実行されます。あなたがTDをクリックするか、TDにマウスを移動すると、他のjQueryコードが実行されます。ここにコードがありますajaxリクエストでイベントを委譲する方法
(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($)
私は2つのイベントを委任しています。私は、をクリックしてとのマウスイベントのようなイベントの種類を知っています。しかし、私は、ページがロードされたとき、またはページ作成を行うときに、関数を実行するときに、イベント型でなければならないことを尋ねたいと思っています。
hideAnswers（）メソッドは、ページが読み込まれたときにのみ実行されます。私はページ名を変更する場合、現在のDOMのHTMLの変更と私のhideAnswers（）メソッドは実行されません。では、hideAnswers（）メソッドもどのように委譲できますか？まあ
おかげ