1

我有一个功能可以很好地创建事件日历所需的自定义工具提示。问题是当用户点击日历上的下个月时，会创建一组新的链接，而 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 并且必须有更好的方法来处理事情，而不是再次粘贴我的函数并在同一个脚本中使用它两次。

提前谢谢你哦聪明的人！

4

2 回答 2

2

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

所以第一步是弄清楚你想监听哪个事件。你正在做工具提示，所以目前你正在使用“悬停”。这没什么错，除了“悬停”实际上是两个事件合二为一：“mouseenter”和“mouseleave”。您可以将“悬停”与 一起使用delegate，但前提是您有一个函数可以同时处理“进入”和“离开”事件。看起来您正在使用两种不同的功能：一种用于构建/淡入工具提示，另一种用于销毁它。

您可以使用delegate两次，一次用于“输入”，一次用于“离开”，除了（根据对 jQuery的评论）并非所有浏览器都支持。（QuirksMode 有一套很好的关于“进入”/“离开”的兼容性表，并解释了为什么它们很棒。）

所以看起来你必须使用“mouseover”和“mouseout”，由于事件冒泡的工作原理，它们要复杂得多。但！如果您只在简单链接上使用工具提示（例如，a包含文本而没有其他内容的元素，或者只有一张图像而没有其他内容的元素），事情应该可以正常工作。

下一步需要了解事件冒泡，这是 QuirksMode 很好解释的另一个主题。当您将鼠标移到某个元素上时，会触发“鼠标悬停”事件。如果该元素具有“鼠标悬停”事件侦听器，则执行该元素。然后该事件向上移动到元素的父级。如果父级有一个“鼠标悬停”事件监听器，那么该监听器也会被执行。这种情况一直持续到事件通过每个父母，一直到document.

所以当你使用 时delegate，你需要告诉 jQuery 你真正在寻找哪些元素。如果您正在等待源自具有“悬停”a类的元素的“鼠标悬停”事件，那么您将使用如下内容：

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', ...);

我提出这个的原因是因为在你当前的函数中，你使用了 selector ".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);
    });
});

您的问题是，当加载新日历时，链接不再具有“悬停”事件侦听器。这里的解决方案将事件委托给table. 但是，如果在构建新日历的过程中，您还构建了一个新表，那么这个解决方案实际上并没有做任何事情。您必须将事件委托给表的父级或其他东西。基本上，你委托给你的 JavaScript 并没有真正改变的元素。（这就是为什么document或"body"在事件委托中如此普遍。）

另外，我并没有真正改变函数本身。我只是将它们移到适当的位置。但是有些事情你可以做得更有效率。我看到的最大问题是构建工具提示的方式。而不是打电话jQuery.each，你可能会做这样的事情：

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

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

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

于 2011-04-11T17:36:33.863 回答
1

首先想到的是您未能为委托指定事件。

你应该这样使用它：

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

注意添加的click（应该是您要委托的任何事件）。

于 2011-04-11T16:17:14.253 回答