LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Problem with jQuery Events

The situation
For example you have a list of users and on click of the user, you wanna see something else like his email. Like this:

// HTML
Max max@codepen.io
Kevin kevin@codepen.io
// SCSS .users { .user { cursor: pointer; span { display: none; } span.show { display: inline-block; } } } // Javascript $(".users .user").click(function() { $(this).find("span").toggleClass("show"); });

Result

Max max@codepen.io
Kevin kevin@codepen.io

So now we have this construct but what if we add a new user to this list via ajax? We'd have a problem. Like so:

// HTML
Max max@codepen.io
Kevin kevin@codepen.io
Add user
// SCSS .users { .user { cursor: pointer; span { display: none; } span.show { display: inline-block; } } } // Javascript $(".users .user").click(function() { $(this).find("span").toggleClass("show"); }); $(".users .add").click(function() { $(this).remove(); $(".users").append("
Tim tim@codepen.io
"); $(".users").append("
Add user
"); });

Result

Max max@codepen.io
Kevin kevin@codepen.io
Add user

For this example I didn't used Ajax to add the new user. But you can see, after you added the new user, you can't show his email by clicking his name. Why? Because the click event is not on the new element. Because it didn't exist so far. What's the fix or in other words: How can I prevent this crap with better code? Like this:

// HTML
Max max@codepen.io
Kevin kevin@codepen.io
Add user
// SCSS .users { .user { cursor: pointer; span { display: none; } span.show { display: inline-block; } } } // Javascript $(document).on("click", ".users .user", function() { $(this).find("span").toggleClass("show"); }); $(document).on("click", ".users .add", function() { $(this).remove(); $(".users").append("
Tim tim@codepen.io
"); $(".users").append("
Add user
"); });

Result

Max max@codepen.io
Kevin kevin@codepen.io
Add user

Solution

To prevent running into this case and wondering for days why your code doesn't work, only set click event handlers like this:

$(document).on("click", "selector", function() { ... });

You bind this event on the document, so whenever the document changes, the event will reload and also trigger your new code.

CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  background-color: #269;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

h1 {
  font-weight: 300;
  margin-bottom: 1em;
}

.wrapper {
  width: 40em;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 1em;
}
.wrapper pre {
  background: rgba(0, 0, 0, 0.6);
  padding: 1em;
  margin: 1em 0;
  color: #fff;
  overflow-x: scroll;
}

.users, .users1 {
  margin-bottom: 1em;
}
.users .user, .users1 .user {
  cursor: pointer;
}
.users .user span, .users1 .user span {
  display: none;
}
.users .user span.show, .users1 .user span.show {
  display: inline-block;
}
JS
$(document).ready(function() {
  // Code Escape
  $("pre").each(function() {
    var val = $(this).html();
    $(this).text(val).html();
  });
  
  $(".users .user").click(function() {
    $(this).find("span").toggleClass("show");
  });
  
  $(".users .add").click(function() {
    $(this).remove();
    $(".users").append("
Tim tim@codepen.io
"); $(".users").append("
Add user
"); }); $(document).on("click", ".users1 .user", function() { $(this).find("span").toggleClass("show"); }); $(document).on("click", ".users1 .add", function() { $(this).remove(); $(".users1").append("
Tim tim@codepen.io
"); $(".users1").append("
Add user
"); }); });
Host Instantly Drag and Drop Website Builder

 

Description

A quick tutorial about a problem with jQuery click events, which leads newbies wondering for forever. Hope this helps.
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID