Question

只需列出＆＃34; todo＆＃34;。一键添加类＆＃34;完成＆＃34;第二次单击删除项目。添加表单以添加新项目。

如果我按表单添加新的列表项，则jQuery选择器$（＆＃39; li＆＃39;）看不到这一点，并且在更改类时不会考虑。

＆＃13;

var $listItems = $('li');
var $list = $('ul');
var $form = $('#newItemForm');

// add item
$form.on('submit', function(e){    
  e.preventDefault();
  $('ul').prepend('<li class = \"active\">' + $('input:text').val() + '</li>');
});

// set item class as 'done' and remove
$('li').on('click', function(){
    
    if ($(this).hasClass('active')){        
        $(this)
        .insertAfter($listItems.last())
        .attr('class','done');        
    }
    else if($(this).hasClass('done')){
        $(this).remove();        
    }
});

＆＃13;

.active {background-color:red; color:#fff;}
ul{ -webkit-padding-start: 0px; margin-bottom:15px;}
ul li {margin-top:3px; list-style:none; line-height:35px; padding:0px 5px; border: 1px solid #808080; background-color: red;}
.done {background-color: green;}
body{width:250px; margin:0px auto;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li  id = "one" class="active">milk</li>
    <li  id = "two" class="active">cabbage</li>
    <li  id = "three" class="active">cucumber <em> bonus </em></li>
    <li  id = "four" class="active">honey</li>
    <li  id = "five" class="active">lemon</li>
</ul>
        
<form id="newItemForm">
    <input type="text" id="itemDescription" placeholder="Add name..." />
    <input type="submit" id="addButton" value="Add" />
</form>

＆＃13;

Answer 1

使用$(document).on('click','li',function() {，如下例所示：

var $listItems = $('li');
var $list = $('ul');
var $form = $('#newItemForm');

// add item
$form.on('submit', function(e) {
  e.preventDefault();
  $('ul').prepend('<li class = \"active\">' + $('input:text').val() + '</li>');
});

// set item class as 'done' and remove
$(document).on('click','li',function() {

  if ($(this).hasClass('active')) {
    $(this)
      .insertAfter($listItems.last())
      .attr('class', 'done');
  } else if ($(this).hasClass('done')) {
    $(this).remove();
  }
});

.active {
  background-color: red;
  color: #fff;
}

ul {
  -webkit-padding-start: 0px;
  margin-bottom: 15px;
}

ul li {
  margin-top: 3px;
  list-style: none;
  line-height: 35px;
  padding: 0px 5px;
  border: 1px solid #808080;
  background-color: red;
}

.done {
  background-color: green;
}

body {
  width: 250px;
  margin: 0px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="one" class="active">milk</li>
  <li id="two" class="active">cabbage</li>
  <li id="three" class="active">cucumber <em> bonus </em></li>
  <li id="four" class="active">honey</li>
  <li id="five" class="active">lemon</li>
</ul>

<form id="newItemForm">
  <input type="text" id="itemDescription" placeholder="Add name..." />
  <input type="submit" id="addButton" value="Add" />
</form>

Answer 2

事件处理程序（点击，提交等等）不适用于动态创建的内容（执行代码时不存在的内容）。

要处理此问题，将事件绑定到文档;

$(document).on('click','li', function(){
    if ($(this).hasClass('active')){        
        $(this)
        .insertAfter($listItems.last())
        .attr('class','done');        
    }
    else if($(this).hasClass('done')){
        $(this).remove();        
    }
});

为什么jQuery选择器看不到新添加的元素

2 个答案: