delegatecommand - Using .delegate in jQuery -

i've got function works great on creating custom tooltips need event calendar. problem when user clicks go next month on calendar, new set of links made , jquery no longer selecting links.

here original function:

jquery(function(){         var tip = jquery("#tip");         var mytitle = "";          jquery(".eventful-pre a, .eventful a").hover(function(e){          tooltip = "<ul>";            jquery.each(jquery(this).attr("title").split(","),function(ind, val){                tooltip  = tooltip +"<li>"+val +"</li>";             });             tooltip = tooltip +"</ul>";              tip.html(tooltip);             mytitle = jquery(this).attr("title");              jquery(this).attr("title", "");              tip.css("top",(e.pagey+5)+"px")                 .css("left",(e.pagex+5)+"px")                 .fadein("slow");          }, function() {                 jquery("#tip").fadeout("fast");                  jquery(this).attr("title", mytitle);         }); 

it works how want it. think .delegate want using grab new elements when appear, i'm doing wrong because it's not working.

jquery("table").delegate("a.em-calnav", function(){         in here pasted previous function.     } 

the calendar can seen @ http://dev.adabible.org/about-ada/

i must doing .delegate wrong , there has better way go things pasting function again , having twice in same script.

thank in advance oh wise ones!

jquery's delegate method assigns event listener. used jquery("table").delegate(...), told jquery assign event listener every table on page.

so first step figure out event want listen for. you're doing tooltips, you're using "hover". nothing wrong that, except "hover" 2 events in one: "mouseenter" , "mouseleave". can use "hover" delegate, if have 1 function handle both "enter" , "leave" events. looks you're using 2 different functions: 1 build/fade in tooltip, , 1 destroy it.

you use delegate twice, once "enter" , once "leave," except (according comment on jquery) that's not supported on browsers. (quirksmode has set of compatibility tables regarding "enter"/"leave", , explanation of why they're awesome.)

so looks you'll have use "mouseover" , "mouseout," quite bit more complicated because of how event bubbling works. but! if you're using tooltips on simple links (e.g., a elements contain text , nothing else, or 1 image , nothing else), things should work out okay.

the next step requires knowledge of event bubbling, subject quirksmode explains well. when move mouse on element, "mouseover" event fired. if element has "mouseover" event listener, executed. the event moves element's parent. if parent has "mouseover" event listener, that 1 executed well. continues until event goes through every parent, way document.

so when use delegate, need tell jquery elements you're looking for. if you're waiting "mouseover" event originated on a element class of "hover," you'll using this:

jquery(document).delegate('a.hover', 'mouseover', ...); 

note first part contains of a.hover elements. these work same:

jquery('body').delegate('a.hover', 'mouseover', ...); jquery(document).delegate('a.hover', 'mouseover', ...); jquery('div.some_container').delegate('a.hover', 'mouseover', ...); 

the reason i'm bringing because in current function, use selector ".eventful-pre a, .eventful a". later, when attempted delegation, used "a.em-calnav". of these selectors want target? if of links have tooltips have class "em-calnav," i'd go that, because wouldn't have hassle descendant selectors. either 1 valid.

so end this:

jquery(function () {     var tip = jquery("#tip");     var mytitle = "";      jquery("table").delegate("your_selector", "mouseover", function (e) {         var tooltip = "<ul>";         jquery.each(jquery(this).attr("title").split(","), function (ind, val) {             tooltip = tooltip + "<li>" + val + "</li>";         });         tooltip = tooltip + "</ul>";          tip.html(tooltip);         mytitle = jquery(this).attr("title");         jquery(this).attr("title", "");          tip.css("top", (e.pagey + 5) + "px")             .css("left", (e.pagex + 5) + "px")             .fadein("slow");      }).delegate("your_selector", "mouseout", function () {         jquery("#tip").fadeout("fast");         jquery(this).attr("title", mytitle);     }); }); 

your problem when new calendar loaded, links no longer had "hover" event listeners. solution here delegates event table. if, in course of building new calendar, build new table, solution doesn't anything. you'd have delegate events table's parent, or something. basically, delegate elements javascript doesn't change. (that's why document or "body" common in event delegation.)

also, didn't change functions themselves; moved them appropriate place. there things little more efficiently. biggest problem saw way build tooltip. instead of calling jquery.each, this:

var tooltip = "<ul>"; mytitle = jquery(this).attr("title");  tooltip += "<li>" + mytitle.split(",").join("</li><li>") + "</li></ul>"; 

hope able help. luck.