jquery popover不工作

這是一個小型的基於Json的小應用程序，用戶可以將iteam從一列拖放到另一列。此外，商品還有各自的描述，這些商品在加載時隱藏起來，只有當您點擊商品列表時纔會變爲真實。請檢查以下問題jquery popover不工作

我已經在Json DOM元素中單擊列表項，實現了Jquery-ui工具提示（http://jsfiddle.net/bh4ctmuj/164/），拖放功能。但我無法弄清楚爲什麼Jquery-ui tooltip無法正常工作。

拋出錯誤如下

"message": "Uncaught TypeError: $(...).tooltip is not a function", 
"filename": "http://stacksnippets.net/js", 
"lineno": 147, 
"colno": 32

$(document).ready(function() { 
 
       $.ajax({ 
 
        type: 'GET', 
 
        url: 'jSon.json', 
 
        data: '', 
 
        dataType: 'json', 
 
        success: function (data) { 
 

 
         //console.log(data); 
 

 
         $.each(data.hotels, function (i, hotel) { 
 
          $('.hotels').append("<li class='hotel' title='" + hotel.description + "'>" + hotel.name + "</li>"); 
 
         }); 
 
         $('.hotels').append('<div></div>'); 
 

 
         $.each(data.location, function (i, place) { 
 
          $('.locations').append("<li class='place'>" + place.name + "</li>"); 
 
         }); 
 
         $('.locations').append('<div></div>'); 
 
        } 
 
       }); 
 
       $('li.hotels').tooltip({ 
 
        position: { my: 'center bottom', at: 'center top-10' }, 
 
        tooltipClass: "myclass", 
 
        disabled: true, 
 
        close: function (event, ui) { $(this).tooltip('disable'); } 
 
       }); 
 

 
       $('li.hotels').on('click', function() { 
 
        alert(); 
 
        $(this).tooltip('enable').tooltip('open'); 
 
       }); 
 
      }) 
 

 
     $(function() { 
 
       $("#sortable1, #sortable2, #sortable3").sortable({ 
 
        connectWith: ".connectedSortable" 
 
       }).disableSelection(); 
 
      });

ul.hotels, ul.Locations, ul.drop-container { 
 
     list-style-type: none; 
 
     border-radius: 5px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 

 
    .hotels li:first-child { 
 
     border-top-left-radius: 5px; 
 
     border-top-right-radius: 5px; 
 
     background: #6eb0e5; 
 
    } 
 

 
    li.hotel { 
 
     background: #c7dff6; 
 
     border:#4c85b2 solid 1px; 
 
     color:#4c85b2; 
 
    } 
 
    li.place{ 
 
    \t background: #daedd5; 
 
    \t border:#53a464 solid 1px; 
 
    \t color:#53a464; 
 
    } 
 

 
    span{ 
 
    \t display:none; 
 
    } 
 

 
    .Locations li:first-child { 
 
     border-top-left-radius: 5px; 
 
     border-top-right-radius: 5px; 
 
     background: #80cb9a; 
 
    } 
 

 
    .drop-container li:first-child { 
 
     border-top-left-radius: 5px; 
 
     border-top-right-radius: 5px; 
 
     background: #80cb9a; 
 
    } 
 

 

 
    .float-left { 
 
     float: left; 
 
    } 
 

 
    .clear { 
 
     clear: left; 
 
    } 
 

 
    #sortable1, #sortable2, #sortable3 { 
 
     border: 1px solid #eee; 
 
     
 
     min-height: 20px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 5px 0 0 0; 
 
     float: left; 
 
     margin-right: 10px; 
 
    } 
 

 
     #sortable1 li, #sortable2 li { 
 
      margin: 0 5px 5px 5px; 
 
      padding: 5px; 
 
      font-size: 1.2em; 
 
      
 
     } 
 

 
     #sortable1 li, #sortable3 li { 
 
      margin: 0 5px 5px 5px; 
 
      padding: 5px; 
 
      font-size: 1.2em; 
 
      
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
    <html> 
 
    <head> 
 
     <title>Assi</title> 
 
     <meta charset="utf-8" /> 
 

 

 

 

 

 
    </head> 
 
    <body> 
 
     <div class=""> 
 
      <div class="float-left"> 
 

 
       <ul class="hotels connectedSortable" id="sortable1"> 
 
        <li>Hotels</li> 
 
       </ul> 
 

 
      </div> 
 

 

 
      <div class="float-left"> 
 
       <ul class="Locations connectedSortable" id="sortable1"> 
 
        <li>Locations</li> 
 
       </ul> 
 
      </div> 
 

 
      <div class="float-left"> 
 
       <ul class="drop-container connectedSortable" id="sortable3" type="A"> 
 
        <li>Hotels & Locations</li> 
 
        <li class="hotel">Hotel 1</li> 
 
        <li class="place">Loction 1</li> 
 
       </ul> 
 
      </div> 
 

 
      <div class="clear"></div> 
 
     </div>

來源

2016-08-01 Harshad Patil

您有重複的包括，刪除jquery-ui庫之一包括：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

希望這有助於。

來源

2016-08-01 18:30:00

兩者都不需要。 –

你的意思是？相同的庫包括兩次，這將產生衝突......並且兩者都包括'tooltip' .. –

如果我刪除它們中的任何一個，它在控制檯上顯示錯誤檢查鏈接 http://proittechnology.com/dev/assign/ –

jquery popover不工作

回答

相關問題