jQuery addClass example

Change class name on click in jQuery

by Satheesh Kumar

HTML

<button>
Click Me! 
</button>
<div class="box">


<p data-hover> sample element <span></span></p></div>

CSS

p{
  padding: 10px;
  border: 1px solid #000000;
}
span{
  color: red;
  font-size: 20;
  font-weight: 900;
}

JavaScript

var count = 1;
var html = "<p data-hover> sample element "+count+"<span></span></p>";
$('button').on('click', function(){
  $('.box').append(html);
  count  += 1;
 });
$(document).on('mouseenter','[data-hover]', function(){
$(this).find('span').text('Entered');
 });
$(document).on('mouseleave','[data-hover]', function(){
$(this).find('span').text('leave');
 });