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 回答