2

我正在尝试创建一个通过 jquery 构建的简单“待办事项”应用程序。这个想法是有一个接受字符串的表单输入，让该字符串成为一个变量，然后将其作为新的“项目”添加到“列表”中。问题是，一旦单击提交按钮，这些新项目（应该显示为新的 HTML p 元素）就不会显示出来。

<!DOCTYPE html>
<html>
  <head>
    <title>To Do</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="style.css" rel="stylesheet" media="screen">
  </head>

  <body>
    <div class="wrapper">
      <div class="main">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron">
               <h1>To Do List</h1>
              <form role="form">
                <div class="form-group">
                  <input type="text" class="form-control" id="listInput" placeholder="add items here">
                </div>
                <div class="button">
                  <button type="submit" class="btn btn-default">Submit</button>
                </div>
              </form>
              <br/>
              <p class="list">
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

查询：

$(document).ready(function(){

    $(".button").click(function(){
        var add = $('input[name=listInput]').val();
    $('.list').append('<p class="item">' + add + '</p>');
    });


     $(document).on('click','.item', function() {
    $(this).remove();
    });

});

JSFIDDLE 在这里：http: //jsfiddle.net/EUq8P/2/

4

2 回答 2

2

问题是按钮是一个submit button通过按钮的默认操作导致页面在点击时刷新

输入字段选择器也有问题，您的选择器将不起作用，因为输入字段没有 name listInput，它有 id listInput，所以您需要使用id-selector

一种解决方案是通过调用事件的 preventDefault() 方法来阻止按钮的默认操作

$(document).ready(function () {

    $(".button").click(function (e) {
        e.preventDefault()
        var add = $('#listInput').val();
        $('.list').append('<p class="item">' + add + '</p>');
    });


    $(document).on('click', '.item', function () {
        $(this).remove();
    });

});

演示：小提琴

另一种是将按钮的类型从提交更改为按钮

演示：小提琴

于 2013-10-05T07:30:02.113 回答
1

工作演示 http://jsfiddle.net/8XfQT/

罪魁祸首是：var add = $('input[name=listInput]').val();

  • 它应该是var add = $('input[id=listInput]').val();

希望休息可以帮助您:) 编写代码

$(document).ready(function () {

    $(".button").click(function () {
        var add = $('input[id=listInput]').val();
        $('.list').append('<p class="item">' + add + '</p>');
    });


    $(document).on('click', '.item', function () {
        $(this).remove();
    });

});
于 2013-10-05T07:30:38.260 回答