CODEWITHSUNDEEP
javascripthtmljquery
Vipul Tyagi
Vipul Tyagi

Reputation: 667

Cannot add click event to dynamically appended list item in jquery

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!

Upvotes: 0

Views: 59

Answers (1)

mplungjan
mplungjan

Reputation: 177940

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>

Upvotes: 2

Related Questions