JSFiddle - React, Tailwind, and code Playground

by arishlabroo

HTML

<div>
    <span data-completeMessage="This is the complete message you see after clicking more" class="more-available">Hello</span>
</div>

CSS

.more{
    cursor:pointer;
    color:blue;
}

JavaScript

//This works
$(document).ready(function() {
    $('div').on('click','a.more', function() {
        var $parent = $(this).parent();
        $parent.text($parent.data('completemessage'));
    });

    $('span.more-available').append($('<a class="more">...more</a>'));
});;

//This does not work, WHY??

/*
$(document).ready(function() {

   $('a.more').on('click', function() {
      var $parent = $(this).parent();
      $parent.text($parent.data('completemessage'));
   });

   $('span.more-available').append($('<a class="more">...more</a>'));
});;
*/