Является ли мой селектор 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)); 
       }); 
      } 
     });   
}); 

У кого-нибудь есть идея, почему он не работает? Как все видят; toolltipcreation выполняется сначала перед использованием выбираемой функции. Спасибо заранее.

Answer 1

Вы должны позвонить $("#selectable").selectable(...), когда элемент действительно существует. Другими словами, после создания всплывающей подсказки.

Answer 2

Код внутри $(function() {...}); работает, когда DOM готов. Тем не менее, вы вставляете свой <ul id="selectable"> позже, используя функцию .append(), поэтому элемент не существует, когда выполняется ваш первый раздел кода.

Вам понадобится запустить этот код после добавления дополнительного HTML-кода.