jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div id='cntnr'>
   <ul id='items'>
      <li>{Keyword:fallback}</li> 
      <li>{KeyWord:fallback}</li> 
   </ul>
</div>

<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>

<div class="container">
  <!-- Modal Preview-->
  <div class="modal fade" id="build" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"></button>
          <h4 class="modal-title">Your Campaign Preview1</h4>
        </div>
       <div class="modal-body">
            <div id="hoursSaved"></div>
                Some text here.
            </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$("#headline11").on("contextmenu", function(e) {
  e.preventDefault();
  $("#cntnr").css({
    "left": e.pageX - 3,
    "top": e.pageY - 3
  });
  $("#cntnr").fadeIn(200, startFocusOut);

});

function startFocusOut() {
  $(document).on("click", function() {
    $("#cntnr").hide();
    $(document).off("click");
  });
}

$("#items > li").click(function() {
  $("#headline11").val($(this).text().replace("fallback", " "));
  var input1 = document.getElementById("headline11");
  setInputSelection(input1, 9, 10);
});