Question

作为我的第一个项目之一，我试图让这个待办事项列表工作。在Codecademy它工作得很好，但在codepen上执行时我得不到回报：

<div class='form'>
    <form name="checkListForm">
      <input type="text" name="checkListItem"/>
      <button class='btn btn-primary'>Add!</button>
      <hr>
  </div>

  <div>
    <h3>My to-do list</h3>
    <div class='container'>
      <div class='list'>

      </div>

    </div>
  </div>  
</div>

JS：

$(function(){
  $('#button').click(function(){
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append('<div class="item">' + toAdd + '</div>');
  })
})

为什么项目没有添加到列表中？谢谢

Answer 1

看起来你忘了给你的按钮一个id。

Answer 2

问题在于您定位 #button ，但没有该ID的元素。您只是希望定位通用$('button')。

另请注意，您的按钮当前位于（不完整）表单内。您需要删除表单组件，这样您才不会在任何地方进行POST（这会刷新页面）。作为删除表单HTML的替代方法，您可以阻止使用e.preventDefault()提交表单。

这是一个更新后的脚本，用于删除表单并更正click()目标：

＆＃13;

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

＆＃13;

.header,
.form,
h3,
h4 {
  text-align: center;
}

.header {
  margin-bottom: 2em;
}

hr {
  width: 50%;
  color: green;
  border-width: 1px;
  border-style: inset;
}

h3 {
  text-decoration: underline;
}

.container {
  background-color: lightgray;
  padding-bottom: 3em;
  padding-top: 1em;
  width: 30%;
}

.item {
  color: black;
  font-size 18px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class='header'>
    <h1>Simple to-do list</h1>
    <h4>Simply type your item and click add</h4>
  </div>

  <div class='form'>
    <input type="text" name="checkListItem" />
    <button class='btn btn-primary'>Add!</button>
  </div>

  <div>
    <h3>My to-do list</h3>
    <div class='container'>
      <div class='list'></div>
    </div>
  </div>
</div>

＆＃13;

希望这有帮助！：）

Answer 3

此处您还可以进行一些验证https://jsfiddle.net/tgq4vsdt/1/

＆＃13;

$(function(){
  $('#button').click(function(){
  	if( $('input[name=checkListItem]').val().trim() != ""){
      var toAdd = $('input[name=checkListItem]').val();
      $('.list').append('<div class="item">' + toAdd + '</div>');
    }
    $('input[name=checkListItem]').val('').focus();
  })
})

＆＃13;

.header, .form, h3, h4 {
  text-align: center;
}

.header {
  margin-bottom: 2em;
}

hr {
  width: 50%;
  color: green;
  border-width: 1px;
  border-style: inset;
}

h3 {
  text-decoration: underline;
}

.container {
  background-color: lightgray;
  padding-bottom: 3em;
  padding-top: 1em;
  width: 30%;
}

.item {
  color: black;
  font-size 18px;
  border-bottom: 1px solid black;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='header'>
    <h1>Simple to-do list</h1>
    <h4>Simply type your item and click add</h4>
  </div>
  
  <div class='form'>
   	<input type="text" name="checkListItem"/>
    <button class='btn btn-primary' id="button">Add!</button>
  </div>
  
  <div>
    <h3>My to-do list</h3>
    <div class='container'>
      <div class='list'>
      </div>
    </div>
  </div>  
</div>

＆＃13;

待办事项列表项不会添加到div

3 个答案: