javascript - 使用 jQuery 和 Bootstrap 添加列表项

Question

我有一个简单的待办事项列表应用程序，运行良好，最近我在没有使用任何 css 框架之前使用 Bootstrap 对应用程序进行了大修。现在 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>