-1

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 'old' are hard coded and jquery works fine but elements under 'new' are appended and same jquery is not working.

$(".ele").on("click", 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more" style="cursor: pointer">click to add box</div>
<br/>
<div id="all">
  <div>Instruction: click the boxes to hide</div>
  <div>Old Elements:</div>
  <div class="ele"></div>
  <div class="ele"></div>
  <div class="ele"></div>
  <br/>
  <br/>
  <div>New Elements:</div>
</div>

I want to append div with same class on which predefined jquery would work. Please Help.

Raghav Garg
  • 3,601
  • 2
  • 23
  • 32

1 Answers1

0

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more" style="cursor: pointer">click to add box</div>
<br/>
<div id="all">
  <div>Instruction: click the boxes to hide</div>
  <div>Old Elements:</div>
  <div class="ele"></div>
  <div class="ele"></div>
  <div class="ele"></div>
  <br/>
  <br/>
  <div>New Elements:</div>
</div>
FalcoB
  • 1,333
  • 10
  • 25