0

内部にリストを含むツールチップを作成しようとしています。このリストは選択可能であるはずなので、次の wbepage のコードを使用しています: http://3nhanced.com/javascript/simple-tooltip-powered-by -jquery/ ツールチップを作成しますが、次のコードを使用して選択可能なアイテムを作成すると:

    $(document).ready(function() {

        $('.toolTip').hover(
            function() {
                this.tip = this.title;
                console.log($(this));
                $(this).append(
                    '<div class="toolTipWrapper">'
                        +'<div class="toolTipTop"></div>'
                        +'<div class="toolTipMid">'
                            +'<ul id="selectable">'
                                +'<li class="ui-widget-content">Item</li>'
                                +'<li class="ui-widget-content">Item</li>'
                            +'</ul>'                                            
                        +'</div>'
                        +'<div class="toolTipBtm"></div>'
                    +'</div>'
                );
                this.title = "";
                this.width = $(this).width();
                $(this).find('.toolTipWrapper').css({left:this.width-22})
                $('.toolTipWrapper').fadeIn(300);
            },
            function() {
                $('.toolTipWrapper').fadeOut(100);
                $(this).children().remove();
                this.title = this.tip;
            }
        );


        $("#selectable").selectable({
            stop: function() {
                var $item2 = $(this),
                $target = $(event.target);
                console.log($target);                   
                var result = $("#select-result").empty();
                $(".ui-selected", this).each(function() {
                    var index = $("#selectable li" ).index(this);
                    result.append(" #" + (index + 1));
                });
            }
        });         
});

なぜそれが機能しないのか、誰にも分かりますか？誰もが見ることができるように; 選択可能な機能を使用する前に、ツールチップの作成が最初に行われます。前もって感謝します。

4

2 に答える 2

2

内部のコード$(function() {...});は、DOMの準備ができたときに実行されます。ただし、<ul id="selectable">後で.append()関数を使用して挿入するため、コードの最初のセクションを実行するときに要素は存在しません。

追加のHTMLを挿入した後、そのコードを実行する必要があります。

于 2012-04-20T21:29:59.173 に答える
1

$("#selectable").selectable(...)要素が実際に存在するときに呼び出す必要があります。つまり、ツールチップを作成した後です。

于 2012-04-20T21:29:37.150 に答える