使用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

我的工作正常，你需要做什么？

＆＃13;

＆＃13;

$(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('');



});
  
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;