jQuery “unbind” back to “bind” not working

问题

When I click an element I would like to unbind "mouseenter" and "mouseleave" events which works fine, but I would like to bind them back on if another element is clicked - this does not work.

any help?

here's the code:

<script type="text/javascript">
  $(document).ready(function(){
        $("#shape1 img").click(function(){
          $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").unbind('mouseenter mouseleave');
    });

     $("#close").click(function(){
        $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").bind('mouseenter mouseleave');
     });
 });
</script>

Many thanks!

回答1:

The .bind() function expects you to pass a function to be executed when those events are triggered.

$("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").bind('mouseenter mouseleave', function(event) {
    // do something here when the mouseenter or mouseleave events are triggered
});

When you call .unbind() the event handler is removed entirely, and jQuery won't remember what it was. You can't simply call .bind() to undo that and have it know what code it's supposed to execute in response to those events.

Also, depending on your version of jQuery (1.7+), you should be using the .on() and .off() functions for adding and removing event handlers.

回答2:

bind will only bind event handlers for currently existing items.

from documentation Bind()

Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs

use On method.

$("#shape1 img").click(function(){
          $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").off('mouseenter');
        });

        $("#close").click(function(){
            $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").on('mouseenter',myFunction1);
            $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").on('mouseleave',myFunction2);
        });

回答3:

Because you need to assign the callbacks to execute when events occur.

Try :

<script type="text/javascript">
  $(document).ready(function(){
        var myFunctionMouseEnter = function(){
           alert('Hey');
        };
        var myFunctionMouseleave = function(){
           alert('Hey');
        };

        $("#shape1 img").click(function(){
          $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").off('mouseenter mouseleave');
        });

        $("#close").click(function(){
            $("#shape1 img,#shape2 img, #shape3 img, #shape4 img, #shape5 img").on('mouseenter',myFunctionMouseEnter )
                                                                               .on('mouseleave',myFunctionMouseleave );
        });
 });
</script>

来源：https://stackoverflow.com/questions/14602475/jquery-unbind-back-to-bind-not-working

标签

jquery

bind

unbind