jqueryセレクタが間違っていますか？

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

要素が実際に存在する場合は$("#selectable").selectable(...)に電話する必要があります。つまり、ツールチップを作成した後です。

Answer 2

$(function() {...});のコードは、DOMの準備が整うと実行されます。ただし、.append()関数を使用して<ul id="selectable">を後で挿入しているため、コードの最初の部分が実行されたときに要素がに存在しません。

追加のHTMLを挿入したら、そのコードを実行する必要があります。