twitter-bootstrap 使用 jQuery 和 Bootstrap 添加列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28692345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding list item using jQuery and Bootstrap
提问by Mark Shakespeare
I had a simple to-do list app that worked fine, recently I overhauled the app using Bootstrap, before I wasnt using any css framework. Now the jQuery is not working properly... Why is this?
我有一个简单的待办事项列表应用程序，运行良好，最近我使用 Bootstrap 对应用程序进行了大修，然后才没有使用任何 css 框架。现在 jQuery 无法正常工作......这是为什么？
Here is the relevent HTML:
这是相关的 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>
This is my Javascript code:
这是我的 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('');
});
});
});
回答by Anwar
Mine works fine, does is what you needed to do ?
我的工作正常，是你需要做的吗？
$(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>