user image

Mahmoud Santos
Published in : 2022-02-21

jQuery Selector is not working .click

jQuery

I don't know why the .on ('click') code is not working with the selector this code is not working whatever I change the selector

 $(function () {
  $('.todolist input').on('keydown', function(e){
    if(e.keyCode == 13){
      $('<li>' + $(this).val() + '<i ></i></li>').appendTo($('.todolist ul'))
      $(this).val('');
    }
  })
})

$(function () {
  $('.todolist .fa-times').on('click', 'li i', function() {
    $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
    $(this).parent('li').remove();
    });

  });
});

This code is working fine without the selector

 $(function () {
    $('.todolist .fa-times').on('click', function() {
        $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
        $(this).parent('li').remove();
        });

    });
});

I'm making a to-do list and I want after any <li> created with jQuery when I click on the icon (x) remove it

<div >
<div >
  <h3>To Do List:</h3>
  <ul>
    <li>Learning JQuery<i ></i></li>
    <li>Codeing My 1st Site<i ></i></li>
    <li>Learning Angular js<i ></i></li>
    <li>Learning SAS<i ></i></li>
    <li>More Training<i ></i></li>
  </ul>
  <input type="text" placeholder="Add New Task">
</div>

Comments

Eslam Zedan Date : 2022-02-21

Best answers

8

Best answers

8

Your delegated event handler has both selector and delegation:

$('.todolist .fa-times').on('click', 'li i', function() {

li i is not a sub-node of .fa-times

change to

$('.todolist').on('click', 'li i.fa-times', function() {

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to use !important using jQuery css function?
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

Display JSON in HTML using jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

How to get the style of element in jQuery? add it to another
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

[SOLVED] jQuery .click() not working with auto added buttons
Publish date: 2021-06-19 | Comments: 2

Tag: jQuery

Accessing Radio button values using Jquery
Publish date: 2022-03-05 | Comments: 1

Tag: jQuery

[solved] SyntaxError: Unexpected token o in JSON at position 1 jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

jQuery alter the class of a button when I click on it?
Publish date: 2022-02-12 | Comments: 1

Tag: jQuery

jQuery .resizable(): How to return to original size after clicking the button?
Publish date: 2022-02-23 | Comments: 1

Tag: jQuery