脚本在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>