Jquery Is Not Working When Append A New Div

I have some element in div, using their class i have some jquery defined. When i add(append) new div with same class, the jquery is not working. In snippet below, elements under 'o

Solution 1:

Your approach was close to working, but if the element gets generated dynamically, you have to call the already existing parent and put the target element in the on() function... otherwise it won't get recognized.

for better explanation, see: http://api.jquery.com/on/

$("#all").on("click",".ele", function() {
  $(this).hide();
});
$("#more").on("click", function() {
  $("<div class='ele'></div>").appendTo("#all");
});

.ele {
  width: 20px;
  height: 20px;
  margin: 10px;
  background-color: #bbb;
  display: inline-block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="more"style="cursor: pointer">click to add box</div><br/><divid="all"><div>Instruction: click the boxes to hide</div><div>Old Elements:</div><divclass="ele"></div><divclass="ele"></div><divclass="ele"></div><br/><br/><div>New Elements:</div></div>