JSFiddle - React, Tailwind, and code Playground

by nicolapeluchetti

HTML

<h1>The Header</h1>

<div id="thediv" >

<form>
  <label for="first">First Name:</label>
  <input type="text" maxlength="50" size="20" id="first" name="first_name"><br>
  <label for="last">Family or Last Name:</label>
  <input type="text" maxlength="50" size="20" id="last" name="last_name"><br>
  <input type="submit" id="submit" value="Submit">
</form>

</div>

<p>Note that this does not re-bind the event in thediv's onclick attribute, becuase that is not accessed or removed by unbind().  </p>

CSS

div#thediv
   { border: solid red 1px;
     width: 50%;
     margin: 1em;
     }

p
   { font-size: small;
     margin-top: 50px;
     }

JavaScript

$(document).ready(function(){
 
   var theDiv = $("#thediv");
 
   theDiv.click(function(){
     $(this).css("border-color", "blue");
     alert("Click!");
   });
       theDiv.click(function(){
     $(this).css("border-color", "blue");
     alert("clack!");
   });

   var theEvents = theDiv.clone(true).data("events");
 
   //  Unbind events from the target div
   theDiv.unbind("click");
 
   //  Put the saved events back on the target div
   for (var e in theEvents){
     //  must iterate through since it's an array full of event handlers
     for ( i=0; i<theEvents[e].length; i++ ){
       theDiv.bind(e, theEvents[e][i].handler);
     }
   }
 
 });