jQuery dynamic binding with stopPropogation()

by Saksham Malhotra

HTML

<div class="outer">outer
  <div class="middle">middle
    <div class="inner">inner</div>
  </div>
</div>

CSS

div {
  padding:20px;
}

JavaScript

/*
$(function(){
	$('.outer').on('click', '.inner', function(e) {
  	e.stopPropogation();
  	alert($(this).attr('class'));
  })
})

$(function(){
	$('.outer').on('click', '.inner, .middle', function(e) {
  	e.stopPropogation();
  	alert($(this).attr('class'));
  })
})

$(function(){
	$('.outer').on('click', '.inner, .middle', function(e) {
  	//e.stopPropagation();
  	alert($(this).attr('class'));
  })
})
*/


$(function(){
	$('.outer').on('click', '.inner, .middle', function(e) {
  	e.stopPropagation();
  	alert($(this).attr('class'));
  })
})

/*$(function(){
	$('.outer').on('click', '.inner', function(e) {
  	//e.stopPropagation();
  	alert($(this).attr('class'));
  })
})*/




/*$(function(){
	$('.inner').on('click', function(e) {
  	e.stopPropagation();
  	alert($(this).attr('class'));
  })
})*/


/*
document.querySelector('.outer').addEventListener('click', function() {
	alert('1');
})

document.querySelector('.outer').addEventListener('click', function() {
	alert('2');
})
*/