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 を間違って実行しているに違いありません。また、関数を再度貼り付けて同じスクリプトで 2 回使用するよりも、より良い方法が必要です。

賢明な皆さん、よろしくお願いします！

4

2 に答える 2

2

jQuery のdelegateメソッドは実際にイベント リスナーを割り当てます。を使用jQuery("table").delegate(...)したため、ページ上のすべてのテーブルにイベント リスナーを割り当てるように jQuery に指示しました。

したがって、最初のステップは、リッスンするイベントを特定することです。ツールチップをやっているので、現在は「ホバー」を使用しています。「hover」が実際には「mouseenter」と「mouseleave」の 2 つのイベントであることを除いて、これは問題ありません。で「hover」を使用できますdelegateが、「enter」イベントと「leave」イベントの両方を処理する関数が 1 つある場合に限ります。2 つの異なる関数を使用しているようです。1 つはツールチップのビルド/フェード、もう 1 つはツールチップの破棄です。

delegate「入力」に 1 回、「終了」に 1 回の 2 回使用できますが、(この jQuery に関するコメントによると) すべてのブラウザーで実際にサポートされているわけではありません。( QuirksMode には、"enter"/"leave" に関する優れた互換性テーブルのセットと、それらが優れている理由の説明があります。 )

そのため、 "mouseover"と"mouseout "を使用する必要があるように見えますが、これらはイベント バブリングのしくみのため、かなり複雑です。しかし！単純なリンク (たとえば、aテキストのみを含む要素、または 1 つの画像だけを含む要素) でのみツールチップを使用している場合は、問題なく動作するはずです。

次のステップでは、QuirksMode が非常によく説明するもう 1 つの主題である、イベント バブリングの知識が必要です。要素の上にマウスを移動すると、「mouseover」イベントが発生します。その要素に「mouseover」イベント リスナーがある場合は、それが実行されます。その後、イベントは要素の親に移動します。親に「mouseover」イベント リスナーがある場合は、それも実行されます。これは、イベントが まで、すべての親を通過するまで続きdocumentます。

したがって、 を使用するときはdelegate、実際に探している要素を jQuery に伝える必要があります。「hover」クラスの要素で発生した「mouseover」イベントを待っている場合は、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 が実際には変更しない要素に委譲します。(そのため、documentor"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 に答える