我的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選擇器錯了嗎？

回答

相關問題