Cannot add click event to dynamically appended list item in jquery

Question

I tried what this question's answer says. This is my code:

$("document").ready(function() {
  $("#add-receiver").on("click", function() {
    $("#userlist").append("<li class=\"userlist-item\">user 1</li>");
  });
  $("#userlist li").on("click", '.userlist-item', function() {
    alert($(this).text());
  });
});

.top-heading {
  font-family: 'Lobster', cursive;
  font-size: 50px;
  text-align: center;
}

.input-boxes {
  position: relative;
  left: 35%;
  top: 20px;
}

.button {
  position: relative;
  left: 30px;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

input[type=text] {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}

#userlist {
  list-style-type: none;
  width: 30%;
  padding: 0;
  margin: 0;
}

#userlist li {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 8px;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block;
}

#userlist li:hover:not(.header) {
  background-color: #eee;
}

<!DOCTYPE html>
<html>

<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  <style type="text/css">

  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <div class="container">
    <h3 class="top-heading">Welcome
      <%= data.username%>
    </h3>
  </div>
  <div class="container">
    <div class="input-boxes"><input type="text" name="names" id="names" placeholder="Enter Receiver Name"><button class="button" id="add-receiver">Add Receiver</button>
      <ul id="userlist">
      </ul>
    </div>
    <div class="input-boxes"><input type="text" name="names" id="message" placeholder="Enter Message"><button class="button" id="send">Send</button>
    </div>
  </div>
</body>

</html>

First click on add receiver button. An item will be appended to userlist. As you click on this item, an alert should apper with the text of clicked item.

But my code doesn't work as expected. I couldn't spot any error. Please help me to get this thing working. Thank you!

$("#userlist li").on("click"... should be $("#userlist").on("click"..., the

score 2 · Answer 1 · answered May 11 '20 at 15:23

You need to remove li from the selector when you delegate because your second parameter is now the object that is clicked

  $("#userlist").on("click", '.userlist-item', function() {
    console.log($(this).text());
  });

$("document").ready(function() {
  $("#add-receiver").on("click", function() {
    $("#userlist").append("<li class=\"userlist-item\">user 1</li>");
  });
  $("#userlist").on("click", '.userlist-item', function() {
    console.log($(this).text());
  });
});

.top-heading {
  font-family: 'Lobster', cursive;
  font-size: 50px;
  text-align: center;
}

.input-boxes {
  position: relative;
  left: 35%;
  top: 20px;
}

.button {
  position: relative;
  left: 30px;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

input[type=text] {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}

#userlist {
  list-style-type: none;
  width: 30%;
  padding: 0;
  margin: 0;
}

#userlist li {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 8px;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block;
}

#userlist li:hover:not(.header) {
  background-color: #eee;
}

<!DOCTYPE html>
<html>

<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  <style type="text/css">

  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <div class="container">
    <h3 class="top-heading">Welcome
      <%= data.username%>
    </h3>
  </div>
  <div class="container">
    <div class="input-boxes"><input type="text" name="names" id="names" placeholder="Enter Receiver Name"><button class="button" id="add-receiver">Add Receiver</button>
      <ul id="userlist">
      </ul>
    </div>
    <div class="input-boxes"><input type="text" name="names" id="message" placeholder="Enter Message"><button class="button" id="send">Send</button>
    </div>
  </div>
</body>

</html>

Cannot add click event to dynamically appended list item in jquery

1 Answers1