How to fire child div event without firing parent div event?

Question

I am trying to fire child div event but it seems that instead of child div , it is the parent div's click event that is getting fired. I tried using stopPropagation in child event but it doesnt seem to work.

$(document).ready(function() {
  var lot = '<div class="divlot">This is a lot!</div>'
  var lineitem = '<div class="divlineitem">This is a lineitem!</div>'

  $("#container").on("click", function() {

    $("#container").append(lot);
  });

  $(".divlot").on("click", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
  });


});

#container {
  background-color: grey;
}
.divlot {
  background-color: red;
  padding-left: 20px;
}
.divlineitem {
  background-color: blue;
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="container">Container</div>

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — CodingIntrigue, Jun 19 '15 at 07:23
@RGraham I dont think this is duplicate question of the one you mentioned because although solutions might be same, questions are different. It might never occur to the person who is asking the question that should search " Event binding on dynamically created elements" or the other way around — SamuraiJack, Jun 19 '15 at 09:45
That's only because *How to fire child div event without firing parent div event* is not actually the problem here. Anyone searching for that wouldn't find the answer to their question here anyway. It's not a duplicate if your question, you're right, but then your question isn't representative of your problem either :) — CodingIntrigue, Jun 19 '15 at 09:47

Satpal · Accepted Answer · 2015-06-19T07:28:46.957

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.

As of now, your are using direct event handler binding for divlot which doesn't exist in the page thus neither event handler work nor e.stopPropagation()

Since you are adding event dynamically you need to use Event Delegation using .on() delegated-events approach.

Bind event using

$("#container").on("click", ".divlot", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
});

$(document).ready(function() {
  var lot = '<div class="divlot">This is a lot!</div>'
  var lineitem = '<div class="divlineitem">This is a lineitem!</div>'

  $("#container").on("click", function() {

    $("#container").append(lot);
  });

  $("#container").on("click", ".divlot", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
  });


});

#container {
  background-color: grey;
}
.divlot {
  background-color: red;
  padding-left: 20px;
}
.divlineitem {
  background-color: blue;
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="container">Container</div>

score 0 · Answer 2 · answered Jun 19 '15 at 07:22

You are creating the child divs dynamically. So you should use event delegation for properly binding the events.

  $("#container").on("click",".divlot", function(e) {
    e.stopPropagation();
    alert($(this).attr("class"));
    $(this).append(lineitem);
  });

Fiddle

How to fire child div event without firing parent div event?

2 Answers2