Question

我正在尝试创建一个带有列表的工具提示，这个列表应该是可选的，所以我使用下一个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));
                });
            }
        });         
});

有谁知道为什么它不起作用？每个人都可以看到;在使用可选功能之前，首先要完成工具提示。提前谢谢。

Answer 1

当DOM准备就绪时，$(function() {...});内的代码会运行。但是，您稍后使用<ul id="selectable">函数插入.append()，因此当您的第一部分代码运行时，元素不存在。

插入其他HTML后，您需要运行该代码。

Answer 2

当元素实际存在时，您必须调用$("#selectable").selectable(...)。换句话说，在您创建了工具提示之后。

我的jquery选择器错了吗？

2 个答案: