如何在点击时切换另一个选择器的悬停事件？

Question

Please take a look at this fiddle

Would anyone please tell me how to enable a hover event for the table cells on clicking the button #edit_mode and disable it on another click?

<button id='enable_mode'>Enable</button>

<table>
  <tbody>
   <tr><td>Package</td><td>1</td></tr>
   <tr><td>Cost</td><td>900</td></tr>
 </tbody>
</table>

jQuery:

$('#enable_mode').click(function(){
   $(this).text(function(i, text){
          return text === "Enable" ? "Enable" : "Disable";
   })
   var see = $(this).text()
   if($(this).text() == "Enable"){
     hoverme($('table tbody tr td:nth-child(2)'));
   }else{
      ????
   }
});

function hoverme(para) {
$(para).hover(
   function() {
     $(this ).append('<div id="edit">Edit</div>' );
    }, function() {
     $( this ).find('#edit').remove();
   }
  );
}

Answer 1

This might be what you want to achieve: JSFiddle
And here's the corresponding code. HTML and CSS code stays the same, I've just added a few more rows for clarity, and some padding and margin.

JS:

$('#enable_mode').click(function () {
    //Check the text of the button
    $(this).text(function (i, text) {
        if (text === "Enable") {
            //Enable hover state with events on mouseenter and mouseleaves 
            $("tr").hover(function () {
                //On mouseenter, change background color (= hover state)
                $(this).css("background-color", "#DDD");
            }, function () {
                //On mouseleave, change background color to default
                $(this).css("background-color", "white");
            });
        } else if (text === "Disable") {
            //Remove mouseenter and mouseleave events.
            $("tr").unbind('mouseenter mouseleave');
        }

        //Toggle the text in the button
        return text === "Enable" ? "Disable" : "Enable";
    });
});

You can modify this code to do practically anything on hover, including appending things (like you wanted to do).

Answer 2

I have modified your code little bit to achieve your what DEMO

Code:

var para = $('table tbody tr td:nth-child(2)');
$('#enable_mode').click(function()
{
   var that = $(this);
   if($(this).text() == "Enable")
   {
     para.bind('mouseover', mouseOver).bind('mouseout', mouseOut);
     that.text("Disable");
   }
   else
   {
     para.unbind('mouseover mouseout');
     that.text("Enable");
   }
});


function mouseOver() {
  $(this).append('<div id="edit">Edit</div>' );
}
function mouseOut() {
  para.find('#edit').remove();
}