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