jQuery“取消绑定”回到“绑定”不起作用

Question

当我单击一个元素时，我想取消绑定“mouseenter”和“mouseleave”事件，这可以正常工作，但如果单击另一个元素，我想将它们重新绑定 - 这不起作用。

有什么帮助吗？

代码如下：

<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>

非常感谢！

Answer 1

.bind() 函数希望您传递一个函数，以便在触发这些事件时执行。

$("#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
});

当您调用.unbind() 时，事件处理程序被完全删除，jQuery 不会记住它是什么。你不能简单地调用.bind() 来撤消它并让它知道它应该执行什么代码来响应这些事件。

此外，根据您的 jQuery 版本（1.7+），您应该使用 .on() 和 .off() 函数来添加和删除事件处理程序。

Answer 2

bind 只会为当前存在的项目绑定事件处理程序。

来自文档Bind()

处理程序附加到当前选定的元素 jQuery 对象，因此这些元素必须存在于调用点 .bind() 发生

使用 On 方法。

$("#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);
        });

Answer 3

因为您需要分配回调以在事件发生时执行。

试试：

<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>