javascript - How to fire child div event without firing parent div event? -
i trying fire child div event seems instead of child div , parent div's click event getting fired. tried using stoppropagation in child event doesnt seem work.
$(document).ready(function() { var lot = '<div class="divlot">this lot!</div>' var lineitem = '<div class="divlineitem">this 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>
event handlers bound selected elements; must exist on page @ time code makes event binding call.
as of now, using direct event handler binding divlot doesn't exist in page neither event handler work nor e.stoppropagation()
since adding event dynamically need 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 lot!</div>' var lineitem = '<div class="divlineitem">this 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>
Comments
Post a Comment