jQuery addClass example

Change class name on click in jQuery

by JonNorman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="dynamicEdit" type="text" value="The Value" />
<br />
<input class="dynamicEdit" type="text" value="Next Value" disabled />
<br />
<textarea class="dynamicEdit">some value here</textarea>

CSS

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}
div.dynamicEdit{color:red}
div.dynamicEditDisabled{color:grey}

JavaScript

$(document).ready(function(){
  alert($(".dynamicEdit").filter(":text,textarea").hide().wrap("<div></div>").after(function(){
    return '<div class="dynamicEdit'+($(this).is(":disabled")?"Disabled":"")+'">' + $(this).val() + '</div>';
  }).parent().click(function(){
    $(this).find("input,textarea").filter(":enabled").show().focus().blur(function(){
      $(this).hide().next("div").show();
    }).change(function(){
      $(this).next("div").html($(this).val());
    }).next("div").hide();
  }).parent().html());
});