CODEWITHSUNDEEP
javascriptjquery
abhig10
abhig10

Reputation: 555

Element click vs Document click preference

I have a parent div with id test-container and inside this are child divs with class icon-btn.

When I click anywhere in parent-div a new child-div element is appended to parent-div at the location of click.

Problem is when I click on child-div element parent-div event fires first and then child-div event fires. I would like child-div event to fire first.

JS:

$('#test-container').on('click', function(e) {
  alert('clicked');
  var parentOffset = $(this).offset();
  var relX = e.pageY - parentOffset.top;
  var relY = e.pageX - parentOffset.left;
  $(this).append('<div class="icon-btn" style="top: ' + relX + 'px; left: ' + relY + 'px; display: block; position: absolute; border-radius: 3px; border: 1px solid #ffffff; overflow: visible; box-shadow: 0 0 2px #000; z-index: 16; width: 50px; height: 50px; padding: 15px 14px; color: #fff; cursor: pointer;" id="icon-btn-1"></div>')
});;

$(document).ready(function() {
  $(document).on('click', '.icon-btn', function() {
    alert('clicked sub div');
  });
});

HTML:

<div style="width: 300px; position: relative;">
  <img src="http://www.flowermeaning.com/flower-pics/Daffodil-Meaning.jpg" class="img-responsive" width="100%" height="100%">
  <div id="test-container" style="position: absolute; top: 0px; cursor: crosshair; left: 0px; width: 300px; height: 200px; z-index: 8;">
    <div class="icon-btn" style="top: 45px; left: 184px; display: block; position: absolute; border-radius: 3px; border: 1px solid #ffffff; overflow: visible; box-shadow: 0 0 2px #000; z-index: 16; width: 50px; height: 50px; padding: 15px 14px; color: #fff; cursor: pointer;"
id="icon-btn-1"></div>
  </div>
</div>

Please see JSFiddle for working example.

Upvotes: 0

Views: 668

Answers (4)

Jibin.Jay
Jibin.Jay

Reputation: 342

Change the way you attach the click event on child divs, like:

`$(document).ready(function() {
  $('.icon-btn').on("click", function() {
    alert("child sub div");
  });
});`

Upvotes: 0

kag
kag

Reputation: 144

//$('#test-container').on('click', function(e) { // this is all about the binding of element 

    $(document).on('click','#test-container', function(e) {
  alert('parent div');
  var parentOffset = $(this).offset();
  var relX = e.pageY - parentOffset.top;
  var relY = e.pageX - parentOffset.left;
  $(this).append('<div class="icon-btn" style="top: ' + relX + 'px; left: ' + relY + 'px; display: block; position: absolute; border-radius: 3px; border: 1px solid #ffffff; overflow: visible; box-shadow: 0 0 2px #000; z-index: 16; width: 50px; height: 50px; padding: 15px 14px; color: #fff; cursor: pointer;" id="icon-btn-1"></div>')
});;

$(document).ready(function() {
  $(document).on('click', '.icon-btn', function() {
    alert('child sub div');
  });
});

Upvotes: 0

Harish
Harish

Reputation: 1911

When you append new element to the parent the previous events attached to the will not work for new one. You can simply remove previous and attach the same event again to have the desired effect

    $('.selectorOfYourDynamicChild').off("click").on('click', function(e) { 
      // Your logic goes here
   })

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68685

Document click will work also for dynamically added elements with that class.

Element click works only for those elements which are ready after DOM loads. If you will add elements with that selector, element click will not work for them.

Upvotes: 1

Related Questions