使用jQuery和Bootstrap添加列表项

Adding list item using jQuery and Bootstrap

本文关键字：列表 添加 Bootstrap jQuery 使用      更新时间：2024-04-11

我有一个简单的待办事项列表应用程序，运行良好，最近我使用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('');

});

})；

我的工作很好，这是你需要做的吗？

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

相关文章：