jquery binding

jquery binding

jquery binding

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Binding and Unbinding Events with jQuery
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script type="text/javascript">
      $(function() {
        $("#evtTarget").bind("mouseover mouseleave", highlight);
        $("#evtTarget").bind("click", function(evt) {
          $("#evtTarget").unbind("mouseover mouseleave", highlight);
          $("#evtTarget").html("<p>You shut off the hover effect!</p>");
        }
                            );
      }
       );
      function highlight(evt) {
        $("#evtTarget").toggleClass("highlighted");
      }
    </script>
    <style type='text/css'>
      .normal {
        width:300px;
        height:200px;
        background-color:Yellow;
        font-size:18pt;
      }
      .highlighted {
        background-color:Red;
      }
    </style>
  </head>
  <body>
    <h1>Binding Event Example
    </h1>
    <div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.
    </div>
  </body>
</html>