javascript - 脚本在 JSFiddle 上运行良好，但在其他地方运行失败

Question

我不知道如何使用 jQuery 库。相同的代码可以在 JSFiddle 中运行；这是链接:http://jsfiddle.net/NhhKd/ 。

请有人告诉我为什么相同的代码可以在 JSFiddle 中运行，但不能在 plunker 或任何其他网站中运行。

$("#fruitList").sortable();

$("body").on('click', '#fruitList .delete', function () {
    $(this).closest(".fruit").remove();
});

$("#addFruit").click(function () {
    $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});

#fruitList {
    margin: 0 auto;
    list-style:none;
    border: 1px solid #000000;
    width:150px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:20px;
}
.fruit {
    cursor:pointer;
    border:1px solid #dddddd;
    background:#eeeeee;
    margin:5px;
    padding:5px;
}
button {
    background:#eeeeee;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
    <li class="fruit">Apple
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Banana
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Orange
        <button class="delete">Delete</button>
    </li>
</ul>

Answer 1

链接的 JSFiddle 包括 jQuery UI 。如果没有它，您将缺少 .sortable()，因为您的 JavaScript console应该提醒你的。

下面修改后的代码片段包括 jQuery UI 和更现代的 jQuery，其工作方式与 JSFiddle 类似。

$("#fruitList").sortable();

$("body").on('click', '#fruitList .delete', function () {
    $(this).closest(".fruit").remove();
});

$("#addFruit").click(function () {
    $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});

#fruitList {
    margin: 0 auto;
    list-style:none;
    border: 1px solid #000000;
    width:150px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:20px;
}
.fruit {
    cursor:pointer;
    border:1px solid #dddddd;
    background:#eeeeee;
    margin:5px;
    padding:5px;
}
button {
    background:#eeeeee;
    cursor:pointer;
}

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

<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
    <li class="fruit">Apple
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Banana
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Orange
        <button class="delete">Delete</button>
    </li>
</ul>