我的jquery选择器错了吗？

我试图创建一个包含列表的工具提示，这个列表应该是可选择的，所以我使用下一个wbepage中的代码： 创建工具提示，但在使用下一个代码创建可选项时：

    $(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));
                });
            }
        });         
});

$（文档）.ready（函数（）{
$（'.toolTip'）。悬停(
函数（）{
this.tip=this.title；
log（$（this））；
$（此）。附加(
''
+''
+''
+“
”
+“
项
+“
项
+“
”
+''
+''
+''
);
this.title=“”；
this.width=$（this.width（）；
$（this.find（'.toolTipWrapper'）.css（{left:this.width-22}）
$（'.toolTipWrapper'）.fadeIn（300）；
},
函数（）{
$（'.toolTipWrapper'）.fadeOut（100）；
$（this.children（）.remove（）；
this.title=this.tip；
}
);
$（“#可选”）。可选({
停止：函数（）{
变量$item2=$（此），
$target=$（event.target）；
console.log（$target）；
var result=$（“#选择结果”）.empty（）；
$（“.ui已选定”，此）.each（函数（）{
var指数=$（“#可选li”）。指数（本）；
结果。追加（“#”+（索引+1））；
});
}
});         
});

有人知道为什么它不起作用吗？ 众所周知,；在使用可选功能之前，先完成toolltipcreation。 提前感谢。

当元素实际存在时，您必须调用

$（“#可选”）。可选（…）

。换句话说，在创建工具提示后。

当元素实际存在时，必须调用

$（“#可选”）.selective（…）

。换句话说，在创建工具提示之后。

在

$（function（）{…}）中的代码在DOM就绪时运行。但是，稍后您将使用
.append（）
函数插入
，因此在运行第一段代码时元素不存在

插入附加HTML后，您需要运行该代码。
中的代码
$（function（）{…}）在DOM就绪时运行。但是，稍后您将使用
.append（）
函数插入
，因此在运行第一段代码时元素不存在

插入额外的HTML后，您需要运行该代码。
@linker85似乎仍然会出现调用代码每个部分的顺序问题。确保
$（“#可选”）.selectable（{…}）节位于附加元素的部分之后。好的，我通过将可选函数放在悬停函数中来解决它。@linker85似乎仍然会出现调用每个代码节的顺序问题。确保
$（“#可选”）.selectable（{…}）部分位于附加元素的部分之后。好的，我通过将可选函数放在悬停函数中来解决它。当我在$（文档）中创建工具提示和可选函数时，不会发生这种情况吗.onready funtcion？？？当我在$（文档）中创建工具提示和可选功能时，不会发生这种情况。onready funtcion？？？稍微偏离主题：您是否每次悬停在某个对象上/关闭某个对象时都创建/附加和销毁一个div？div已经存在并隐藏/显示它不是更容易吗？有点离题：您是否每次悬停在某个对象上/关闭某个对象时都创建/附加和销毁div？div已经存在并隐藏/显示它不是更容易吗？