jquery - 在 jQuery 中使用 .delegate

Question

我有一个功能，非常适合创建事件日历所需的自定义工具提示。问题是，当用户单击转到日历上的下个月时，会创建一组新的链接，并且 jQuery 不再选择这些链接。

这是我原来的函数:

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);
        });

它按照我想要的方式工作。我认为 .delegate 是我想要用来在新元素出现时获取它们的东西，但我可能做错了，因为它不起作用。

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

日历可以在http://dev.adabible.org/about-ada/查看

我一定做错了 .delegate，而且还必须有一种更好的方法来处理事情，而不是再次粘贴我的函数并在同一个脚本中使用它两次。

提前谢谢各位智者!

Answer 1

jQuery 的 delegate 方法实际上分配一个事件监听器。您使用了 jQuery("table").delegate(...)，因此您告诉 jQuery 为页面上的每个表分配一个事件监听器。

所以第一步是弄清楚你想监听哪个事件。您正在制作工具提示，因此目前您正在使用“悬停”。这没有什么问题，除了“hover”实际上是两个事件合而为一:“mouseenter”和“mouseleave”。您可以将“hover”与delegate 结合使用，但前提是您有一个函数可以同时处理“enter”和“leave”事件。看起来您正在使用两种不同的函数:一种用于在工具提示中构建/淡出，另一种用于销毁它。

您可以使用 delegate 两次，一次用于“进入”，一次用于“离开”，但并非所有浏览器实际上都支持 ( according to this comment on jQuery )。 (QuirksMode has a good set of compatibility tables regarding "enter"/"leave", and an explanation of why they're awesome.)

所以看来您必须使用“mouseover”和“mouseout”，由于事件冒泡的工作原理，它们要复杂一些。但!如果您仅在简单链接上使用工具提示(例如，包含文本但不包含任何其他内容的 a 元素，或者包含一张图像而不包含其他任何内容)，那么一切应该没问题。

下一步需要了解event bubbling, another subject that QuirksMode explains really well 。当您将鼠标移到某个元素上时，会触发“mouseover”事件。如果该元素有一个“mouseover”事件监听器，那么它就会被执行。 然后该事件向上移动到该元素的父元素。如果父元素有一个“mouseover”事件监听器，那么<​​em>该也会执行该事件监听器。这一直持续到事件经过每个父级，一直到 document。

因此，当您使用delegate时，您需要告诉jQuery您实际上正在寻找哪些元素。如果您正在等待源自“hover”类的 a 元素的“mouseover”事件，那么您将使用如下内容:

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

请注意，第一部分可以是包含所有 a.hover 元素的任何内容。这些的工作原理都差不多:

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

我提出这个问题的原因是因为在您当前的函数中，您使用了选择器“.eventful-pre a, .eventful a”。但后来，当您尝试委派时，您使用了“a.em-calnav”。您真正想要定位这些选择器中的哪一个？如果所有可能有工具提示的链接也有“em-calnav”类，那么我会选择它，因为您不必为后代选择器而烦恼。但其中任何一个都是有效的。

所以我们最终得到的是这样的:

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);
    });
});

您的问题是，当加载新日历时，链接不再具有“悬停”事件监听器。此解决方案此处将事件委托(delegate)给表。但是，如果在构建新日历的过程中，您还构建了一个新表，那么此解决方案实际上没有任何作用。您必须将事件委托(delegate)给表的父级或其他表。基本上，您委托(delegate)给 JavaScript 不会真正更改的元素。 (这就是为什么 document 或 "body" 在事件委托(delegate)中如此常见。)

而且，我并没有真正改变函数本身；我只是将它们移动到适当的位置。但有些事情你可以做得更有效一些。我看到的最大问题是构建工具提示的方式。您可以执行以下操作，而不是调用 jQuery.each:

var toolTip = "<ul>";
myTitle = jQuery(this).attr("title");

toolTip += "<li>" + myTitle.split(",").join("</li><li>") + "</li></ul>";

希望我能提供帮助。祝你好运。