脚本在 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 应该已经提醒你了。

下面修改后的 sn-p，包括 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>