Why does the jQuery selector not see the newly added element

Question

Simply list "todo". One click add class "done" second click remove items. Adding form to add new items.

If I add new list item by form, jQuery selector $('li') not see this and does not take into account when changing class.

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();        
    }
});

.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>

score 0 · Answer 1 · answered Nov 04 '17 at 15:19

Use $(document).on('click','li',function() { like in the below example:

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>

Why does the jQuery selector not see the newly added element

1 Answers1