使用jQuery和Bootstrap添加列表項目

Question

我有一個簡單的待辦事項列表應用程序工作正常，最近我在使用Bootstrap之前徹底檢查了應用程序，之後我沒有使用任何css框架。現在jQuery不能正常工作......這是爲什麼？

這裏是培訓相關HTML：

<div id="to-do"> 
    <form class="form-inline"> 
     <input class="form-control" type="text" id ="input" placeholder ="I need to..."> 
     <button class="btn btn-primary" id ="add" type="submit">Add Item</button> 

    </form> 

    <ul id="list"></ul> 

</div> 

這是我的Javascript代碼：

$(function() { 

// configuration 

// button 
var add = $('#add'); 

// list container 
var listContainer = $('#list'); 



// click event for button 

add.on('click', function() { 


    // value of input 
    inputValue = $('#input').val(); 

    // add new list item 
    listContainer.prepend('<li> ' + inputValue + '</li>'); 
    // clear value input 
    $('#input').val(''); 



}); 

}）;

Answer 1

礦井正常工作，你需要做什麼？

$(function() { 
 
    
 

 
// configuration 
 

 
// button 
 
var add = $('#add'); 
 

 
// list container 
 
var listContainer = $('#list'); 
 

 

 

 
// click event for button 
 

 
add.on('click', function() { 
 

 
    event.preventDefault(); // stop default behaviour of submit button 
 
    // value of input 
 
    inputValue = $('#input').val(); 
 

 
    // add new list item 
 
    listContainer.prepend('<li> ' + inputValue + '</li>'); 
 
    // clear value input 
 
    $('#input').val(''); 
 

 

 

 
}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<div id="to-do"> 
 
    <form class="form-inline"> 
 
     <input class="form-control" type="text" id ="input" placeholder ="I need to..."> 
 
     <button class="btn btn-primary" id ="add" type="submit">Add Item</button> 
 
    </form> 
 

 
    <ul id="list"></ul> 
 

 
</div>