元素綁定兩次

這是我第一次問這裏，是的這意味着我已經用盡了我的選擇。我目前正在使用一個腳本來動態地修改和元素的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/

來源

2016-01-13 Jaycroll

使用'.off'而不是'.unbind'。 '.unbind'只適用於綁定了'.bind（）'的事件' –

以前已經試過'.off'，也沒有工作;（ – Jaycroll

@Jaycroll我認爲你正在試圖解決問題而不尋找根本原因問題伴侶的問題:) – Siddharth

您需要使用off函數刪除modifyCssElement函數中以前的設置處理函數。

例如

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

... 

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

這是因爲您正在重複使用相同的HTML元素作爲上下文菜單。當你打電話給focusout等，它不覆蓋以前的處理程序。每次調用都會向HTML元素添加一個偵聽器處理程序。要停止這個操作，您必須顯式刪除以前的處理程序（使用off）否則所有以前添加的操作都會被觸發。

來源

2016-01-13 12:56:33

你對它的工作O> o怪不得以前工作。我在'＃contextmenu'上調用'.off（）'而不是輸入元素。非常感謝！ – Jaycroll

正如George回答的，您必須在接下來的輸入字段上解除綁定事件偵聽器，以便可以刪除先前的偵聽器。您的代碼的問題在於，每次執行modifyCssElement函數時，都會將事件偵聽器附加到輸入元素，如$("#padding")。

當你做$('#contextmenu').hide()因此，要解決這個問題，你必須執行額外的代碼刪除以前的事件偵聽器，因此：

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

編輯：無需爲.off（「**」）

來源

2016-01-13 13:03:41 mylee

我在JSFiddle中嘗試了這一點，它的工作原理，但只有當你將調用修改爲'.off（）;'，而不是'.off（「**」）;'如果你想使用「**」，你需要指定你想刪除所有處理程序的事件，即'.off（「change」，「**」）;'' –

我認爲這是因爲你正在寫你的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));

是huhahha得到印在遞增事件數量越來越註冊每次調用該函數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輸出的新副本，一個時間第一次改變邊界半徑，第二次改變邊界半徑等等......所以我認爲你的事件不僅僅是兩次附着，它們正在附加你按下的次數mousewheel

來源

2016-01-13 13:17:37 Siddharth

元素綁定兩次

回答

相關問題