元素两次绑定

杰克罗尔

这是我第一次在这里问,是的,这意味着我已经筋疲力尽了。我目前正在研究一个脚本,该脚本可以动态地修改元素的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 ));

这是脚本的小提琴:

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

乔治·李

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

例如

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

...

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章