Javascript 元素被绑定两次

这是我第一次在这里问，是的，这意味着我已经用尽了我的选择。 我目前正在编写一个脚本，它可以动态修改元素的css属性。我在脚本更改两个（我在示例中放置了两个元素）元素的css属性而不是仅更改其中一个元素时遇到问题。 下面是它是如何发生的：

更改一个元素的css。它被正确地更改了

尝试更改下一个元素的css

这两个元素现在具有后一个元素相同的css

以下是我所做的功能：

打开上下文菜单（使用鼠标中键）

更改css的实际代码

(function ( $ ) {

    $.fn.modifyCssElement = function() {
        var element = this;
        console.log(this.attr('id'));
        $('#border').val(element.css("border"));
        $('#padding').val(element.css("padding"));
        $('#z-index').val(element.css("z-index"));
        $('#border-radius').val(element.css("border-radius"));


        var elembg = this.css('background');
        $("#padding").focusout( function(){
            element.css('padding', "");
            element.css('padding', $(this).val());

        });

        $("#border-radius").change( function(){
            element.css('-webkit-border-radius', "");
            element.css('-moz-border-radius', "");
            element.css('border-radius', "");
            element.css('-webkit-border-radius', $(this).val());
            element.css('-moz-border-radius', $(this).val());
            element.css('-moz-border-radius', $(this).val());


        });
        $("#border").change( function(){
            element.css('border', "");
            element.css('border', $(this).val());
            console.log(element.attr('id'));

        });
        $("#z-index").change( function(){
            element.css('z-index', "");
            element.css('z-index', $(this).val());

        });

        return this;
    };

}( jQuery ));

下面是一段脚本：

您需要使用该函数删除

modifycselement

函数中以前的设置处理程序

e、 g

---

这是因为您正在为上下文菜单重用相同的HTML元素。调用

focusout

等时，它不会覆盖以前的处理程序。每次调用都会向HTML元素添加一个侦听器处理程序，要停止此操作，您必须显式删除以前的处理程序（使用

off

），否则之前添加的所有处理程序都将被触发。

正如George所回答的，您必须在输入字段上解除事件侦听器的绑定，以便删除以前的侦听器。代码的问题在于每次执行

modifycselement

函数时，事件侦听器都会附加到输入元素，如

$（“#padding”）

因此，要在执行

$（“#contextmenu”）.hide（）时解决此问题，必须执行额外的代码以删除以前的事件侦听器，如下所示：

$("#padding, #border-radius, #border, #z-index").off()

编辑：不需要.off（“**”）我认为这是因为您正在
modifyCssElement
函数中编写事件，我尝试了这个方法，效果很好

(function ( $ ) {
    var element;
    $.fn.modifyCssElement = function() {
      element = this;

      $('#border').val(element.css("border"));
      $('#padding').val(element.css("padding"));
      $('#z-index').val(element.css("z-index"));
      $('#border-radius').val(element.css("border-radius"));


      var elembg = this.css('background');


      return this;
  };

  $("#padding").focusout( function(){
        element.css('padding', "");
        element.css('padding', $(this).val());

 });

    $("#border-radius").change( function(){
    console.log(element);
        element.css('-webkit-border-radius', "");
        element.css('-moz-border-radius', "");
        element.css('border-radius', "");
        element.css('-webkit-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());


    });
    $("#border").change( function(){
        element.css('border', "");
        element.css('border', $(this).val());
        console.log(element.attr('id'));

    });
    $("#z-index").change( function(){
        element.css('z-index', "");
        element.css('z-index', $(this).val());

    });

}( jQuery ));

每次调用函数
modifyCssElement
时，都会注册一个新的事件副本。为了调试，我尝试了这个方法

$("#border-radius").change( function(){
    console.log("huhahha");
        element.css('-webkit-border-radius', "");
        element.css('-moz-border-radius', "");
        element.css('border-radius', "");
        element.css('-webkit-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());


    });

而
控制台
的输出是
huhahha
以增量打印，第一次更改边界半径一次，第二次更改边界半径两次，依此类推。。。因此，我认为您的事件不仅被附加了两次，而且被附加了您按下
鼠标滚轮的次数

使用
.off
而不是
.unbind
.unbind
仅当使用
.bind（）
绑定的事件已尝试
.off
之前也不起作用时才有效；（@Jaycroll我认为您是在试图解决问题，而没有寻找问题的根本原因，mate:）我在JSFIDLE中尝试了这个方法，它是有效的，但前提是您将调用修改为just
.off（），而非
.off（**）
如果要使用“**”，则需要指定要从中删除所有处理程序的事件，即
.off（“更改”、“**”）你是对的，它起作用了，难怪以前不起作用。我调用的是
.off（）
而不是输入元素。谢谢！
(function ( $ ) {
    var element;
    $.fn.modifyCssElement = function() {
      element = this;

      $('#border').val(element.css("border"));
      $('#padding').val(element.css("padding"));
      $('#z-index').val(element.css("z-index"));
      $('#border-radius').val(element.css("border-radius"));


      var elembg = this.css('background');


      return this;
  };

  $("#padding").focusout( function(){
        element.css('padding', "");
        element.css('padding', $(this).val());

 });

    $("#border-radius").change( function(){
    console.log(element);
        element.css('-webkit-border-radius', "");
        element.css('-moz-border-radius', "");
        element.css('border-radius', "");
        element.css('-webkit-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());


    });
    $("#border").change( function(){
        element.css('border', "");
        element.css('border', $(this).val());
        console.log(element.attr('id'));

    });
    $("#z-index").change( function(){
        element.css('z-index', "");
        element.css('z-index', $(this).val());

    });

}( jQuery ));

$("#border-radius").change( function(){
    console.log("huhahha");
        element.css('-webkit-border-radius', "");
        element.css('-moz-border-radius', "");
        element.css('border-radius', "");
        element.css('-webkit-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());
        element.css('-moz-border-radius', $(this).val());


    });