bind and unbind problem for secondly click

There are my codes:

Jquery

$(function() {
                $("#evtTarget").bind("mouseover",highlighted);
                $("#evtTarget").bind("mouseleave",highlighted);

                $("#evtTarget").bind("click",function(){
                    $("#evtTarget").unbind("mouseover",highlighted);
                    $("#evtTarget").unbind("mouseleave",highlighted);
                    $("#evtTarget").html("Off.Click for On.");

                    });
        });

        function highlighted(evt){
                $("#evtTarget").toggleClass("highlighted");
            }

Html

<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">On. Click for Off.</div>

Css

normal {
        width:300px;
        height:200px;
        background-color:red;
        font-size:18pt;
        color:black;
   }
.highlighted {
       backgroun开发者_如何学编程d-color:white;
}

If you mouseover evtTarget id paragraph highligt. And if you click evtTarget id highlighting will be off.

But I want to if user click secondly highlighting is on.

How can i do this?

You could use the .data method (api) to save the whether or not highlighting is on:

$(function() {
    $("#evtTarget").bind("mouseover",highlighted)
        .bind("mouseleave",highlighted)
        .data("isOn", true);

    $("#evtTarget").bind("click",function(){

        if($(this).data("isOn")) {
            $("#evtTarget")
               .unbind("mouseover",highlighted)
               .unbind("mouseleave",highlighted)
               .removeClass("highlighted")
               .html("Off:   Click for On.")
               .data("isOn", false);

        } else {
            $("#evtTarget")
               .bind("mouseover",highlighted)
               .bind("mouseleave",highlighted)
               .addClass("highlighted")
               .html("On:   Click for Off.")
               .data("isOn", true);                        
        }
   });
});

function highlighted(evt){
    $("#evtTarget").toggleClass("highlighted");
}

I'm not sure what you mean by click secondly. If you mean right click (secondary mouse button), you'll want to also bind to "rightclick". If you mean you want the highlighting back on when they click a second time, your code already appears to do the highlighting. If you just want to change the text as well, you'd want to just put something like this into your highlight method:

if$("#evtTarget").html().indexOf("Off") == 1){
    $("#evtTarget").html("On. Click for Off.");
} else {
    $("#evtTarget").html("Off. Click for On.");
}

try this javascript:

<script type="text/javascript">
$(function() {
  $(".normal").live("mouseover", highlighted);
  $(".normal").live("mouseleave", highlighted);

  $("#evtTarget").toggle(
    function() {
      $(this).toggleClass("normal");
      $(this).html("Off.Click for On.");
    },
    function() {
      $(this).toggleClass("normal");
      $(this).html("On. Click for Off.");
    }
  );
});

function highlighted(evt){
  $("#evtTarget").toggleClass("highlighted");
}
</script>

instead of managing the state of your as highlight-able manually, let jQuery do the work for you. If the user clicks the div, remove the 'normal' class which invalidates the mouseover and mouseleave events. If they click again, just reinstate the 'normal' class.

You can see the documentation for the function at live().