javascript - 元素被绑定(bind)两次

Question

这是我第一次在这里提问，是的，这意味着我已经用尽了我的选择。我目前正在编写一个动态修改元素的 css 属性的脚本。我在更改两个元素(我在示例中放置了两个元素)而不是仅更改其中一个元素的 css 属性时遇到问题。事情是这样发生的:

1. 改变一个元素的CSS。已正确更改
2. 尝试更改下一个元素的 css
3. 这两个元素现在都具有后一个元素的相同 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 ));

这是脚本的 fiddle :

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

Answer 1

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

例如

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

...

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

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