Simple event delegation with jquery

Attach ( delegate) event handlers to parent element in the DOM tree in order to persist handlers, this way we can add and remove elements and handler will work until we turn it off

by Viktor Evdokimov

HTML

<div>
    <p>new text</p>
</div>
<button>add text</button>

JavaScript

$('div').on('mouseover', 'p', function() {
    $(this).fadeOut() 
}).on('mouseout','p', function() {
  $(this).fadeIn()  
})

$('button').on('click', function() {
  
    $('div').append('<p>new text</p>')
    
})