Question

这是我第一次问这里，是的，这意味着我已经筋疲力尽了。我目前正在开发一个动态修改和元素的css属性的脚本。我遇到了脚本更改两者的css属性（我在示例中放置了两个元素）元素而不仅仅是其中一个元素的问题。所以这就是它的发生方式：

更改一个元素的CSS。它被正确更改了
尝试更改下一个元素的css
这两个元素现在具有后一元素的相同css。

这是我所做的功能：

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

(function ( $ ) {

    $.fn.openMenu = function(opt) {

        console.log(x+" "+y);

        $('#contextmenu').css( 'position', 'absolute' );
        $('#contextmenu').css( 'top', y );
        $('#contextmenu').css( 'left', x );
        $('#contextmenu').show();
        $('#close_context').on("click", function(){

                $('#contextmenu').hide();
            });
        $("#addContent").on("click", function(){
                $('#contextmenu').hide();

        });
        $('#deleteElement').on("click", function(){
            element.remove();

            $('#contextmenu').hide();
        });
        $('#contextmenu').unbind();
        return this;
    };

}( jQuery ));

更改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 ));

这是剧本的小提琴：

https://jsfiddle.net/092swmxj/1/

Answer 1

您需要使用off功能删除modifyCssElement功能中以前设置的处理程序。

e.g。

$("#padding").off('focusout').focusout( function(){

...

$("#border-radius").off('change').change( function(){

这是因为您正在为上下文菜单重复使用相同的HTML元素。当您致电focusout等时，它不会覆盖以前的处理程序。每次调用都会向HTML元素添加一个侦听器处理程序。要停止此操作，您必须显式删除以前的处理程序（使用off），否则之前添加的所有内容都将被触发。

Answer 2

正如George所回答的那样，你必须在输入字段上取消绑定事件监听器，以便可以删除先前的监听器。代码的问题在于，每次执行$("#padding")函数时，事件侦听器都会附加到modifyCssElement之类的输入元素。

因此，要在执行$('#contextmenu').hide()时解决此问题，必须执行额外的代码以删除以前的事件侦听器，如下所示：

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

编辑：不需要.off（＆＃34; **＆＃34;）

Answer 3

我认为这种情况正在发生，因为您正在modifyCssElement函数中编写事件，我尝试了fiddle并且它运行正常。

(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());


    });

并且console中的输出为huhahha以增量编号打印，一次为border-radius的第一次更改，两次为border-radius的第二次更改，依此类推......所以我认为你的活动不仅仅是两次附加，它们正在加入mousewheel

的次数

元素绑定两次

3 个答案: