在jQuery中使用.delegate

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

已邀请:

2 个回复

凰葱崎济邯

jQuery的delegate方法实际上分配了一个事件监听器。你使用jQuery("table").delegate(...)，所以你告诉jQuery为页面上的每个表分配一个事件监听器。所以第一步是找出你想要听的事件。你正在做工具提示，所以目前你正在使用“悬停”。没错，除了“悬停”实际上是两个事件：“mouseenter”和“mouseleave”。您可以将“悬停”与delegate一起使用，但前提是您只有一个功能来处理“进入”和“离开”事件。看起来你正在使用两个不同的功能：一个用于构建/淡入工具提示，一个用于销毁它。你可以使用delegate两次，一次用于“输入”，一次用于“离开”，除了（根据这个关于jQuery的评论）在所有浏览器上实际上都不支持。（QuirksMode有一组关于“输入”/“离开”的兼容性表，并解释了为什么它们很棒。）所以看起来你将不得不使用“鼠标悬停”和“鼠标输出”，由于事件冒泡的工作方式，它们要复杂得多。但！如果你只是在简单链接上使用工具提示（例如，包含文本而不包含任何其他内容的a元素，或者一个图像而没有其他内容），那么事情应该没问题。下一步需要了解事件冒泡，这是QuirksMode非常好地解释的另一个主题。将鼠标移到元素上时，会触发“mouseover”事件。如果该元素具有“mouseover”事件侦听器，则执行该事件。然后事件向上移动到元素的父级。如果父级具有“mouseover”事件侦听器，则也会执行该侦听器。这种情况一直持续到事件经历每个父母，一直到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', ...);

我提出这个问题的原因是因为在你当前的功能中，你使用选择器".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>";

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

伐教爸

首先想到的是，您未能为委托指定事件。你应该使用它：

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

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

要回复问题请先登录或注册

在jQuery中使用.delegate

2 个回复

发起人

delegatecommand

问题状态

在jQuery中使用.delegate

与内容相关的链接

2 个回复

发起人

delegatecommand

问题状态