Question

这是一个小型的Json Based小应用程序，用户可以将iteam从一列拖放到另一列。此外，项目的各个描述在加载时隐藏，只有在您单击项目列表时才会生效。请查看以下问题

我已经实现了Jquery-ui Tooltip（http://jsfiddle.net/bh4ctmuj/164/）点击Json DOM元素中的List Item，拖放功能。但是我无法弄清楚为什么Jquery-ui工具提示不起作用。

抛出错误如下

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

＆＃13;

$(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();
            });

＆＃13;

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{
    	background: #daedd5;
    	border:#53a464 solid 1px;
    	color:#53a464;
    }

    span{
    	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;
         
        }

＆＃13;

<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>

＆＃13;

Answer 1

您有重复的包含，删除其中一个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>

希望这有帮助。

Jquery popover无效

1 个答案: