Click event on javascript createn div

Question

Here I have a html

<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div>

And javascript function for greating a subdiv

function subdiv() {
    var p = document.getElementById('maindiv');
    var s = document.createElement('div');
    s.setAttribute('id','subdiv');
    p.appendChild(s);
    var s2 = document.getElementById('subdiv');
    s2.style.height = '100px';
    s2.style.width = '100px';
    s2.style.backgroundColor = 'green';
}

And here I want to do an event outside document.getElementById('subdiv'):

document.addEventListener('click',function() {
    alert('hello world');
});

How to avoid the alert('hello world') reaction on clicking the subdiv, and how to do, that works EXACTLY ONCE in every click outside the subdiv? I like possible simple response without a jquery. https://jsfiddle.net/hx2u6j35/ Thank you.

Dhara · Accepted Answer · 2016-04-27 06:40:41Z

Div tag is not properly append to the maindiv so I have created myself and preventing child tag from calling parent function

function subdiv() {
  var p = document.getElementById('maindiv');
  var s = document.createElement('div');
  s.setAttribute('id', 'subdiv');
  s.setAttribute('onclick', 'return false;');
  p.appendChild(s);
  var s2 = document.getElementById('subdiv');
  s2.style.height = '100px';
  s2.style.width = '100px';
  s2.style.backgroundColor = 'green';
}

document.addEventListener('click', function() {
  alert('hello world');
});

$("#subdiv").on('click', function(e) {
  alert("subdiv");
  return false; //THIS WON'T CALL PARENT FUNCTION OR YOU CAN USE e.stopPropagation
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()">
  <div id="subdiv" style="height:100px;width:100px;background-color:green"></div>
</div>

Rayon · Accepted Answer · 2016-04-27 06:28:39Z

1

Use event.target to grab the Element on which event is invoked.

function subdiv() {
  var p = document.getElementById('maindiv');
  var s = document.createElement('div');
  s.setAttribute('id', 'subdiv');
  p.appendChild(s);
  var s2 = document.getElementById('subdiv');
  s2.style.height = '100px';
  s2.style.width = '100px';
  s2.style.backgroundColor = 'green';
}

document.addEventListener('click', function(e) {
  if (e.target.id == 'maindiv') {
    alert('hello world');
  }
});

<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div>

answered Apr 27, 2016 at 6:28

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Comments

gurvinder372 · Accepted Answer · 2016-04-27 06:30:19Z

1

You need to disable event-capturing by passing another argument to the event handler

document.addEventListener('click',function() {
    alert('hello world');
}, false);

answered Apr 27, 2016 at 6:30

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

pad31 · Accepted Answer · 2016-04-27 06:38:46Z

1

First, you have an error when running this code.. The subdiv function is not available for the "onclick" function..

Get rid of the onclick attribute by using this :

document.addEventListener('click',function( _event ) {
    if( _event.target.id === "maindiv" ){
        subdiv();
    }else{
        alert('hello world');
    }
});

With this, you can avoid anything when you want..

answered Apr 27, 2016 at 6:38

pad31

581 silver badge7 bronze badges

Collectives™ on Stack Overflow

Click event on javascript createn div

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related