Question

我正在尝试创建一个通过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>

JQUERY：

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

Answer 1

问题是该按钮是submit button，会导致按钮的默认操作单击时刷新页面

输入字段选择器也存在问题，您的选择器将无法工作，因为输入字段的名称不是listInput，标识为listInput，因此您需要使用{{ 3}}

一种解决方案是通过调用事件的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();
    });

});

演示：id-selector

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

演示：Fiddle

Answer 2

工作演示 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(); }); });

从表单输入添加内容到页面 - jquery

2 个答案: