我的jquery选择器错了吗？

我试图创建一个列表里面的工具提示，这个列表应该是可选的，所以我使用下一个wbepage的代码：http://3nhanced.com/javascript/simple-tooltip-powered-by-jquery/ 来创建我的工具提示，但是当我使用下一个代码创建可选项目：我的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)); 
       }); 
      } 
     });   
});

有没有人有一个想法，为什么它不工作？每个人都可以看到;在使用可选功能之前，先完成toolltip创建。在此先感谢。

来源

2012-04-20 linker85

有点偏题：你每次徘徊/关闭某物时，是否在创建/附加和销毁div？对于div已经存在并隐藏/显示它不是更容易吗？ – 2012-04-20 21:55:06

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

来源

2012-04-20 21:29:37

当我创建我的工具提示和$（document）.onready funtcion内的可选函数时，会不会发生这种情况？ – linker85 2012-04-20 21:34:31

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

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

来源

2012-04-20 21:29:59

我正在运行$（document）.ready函数中的所有东西 – linker85 2012-04-20 21:32:31

@ linker85看起来好像你调用代码的每个部分的顺序会有问题。确保'$（“#selectable”）.selectable（{...}）;'部分在追加元素的部分之后**。 – 2012-04-20 21:34:25

好吧，我通过将可选函数放入悬停函数来解决它。 – linker85 2012-04-21 02:19:03

我的jquery选择器错了吗？

回答

相关问题