JQuery插件 - 回調打破其他功能

Question

我試圖建立一個基本的顏色選擇器插件（主要作爲一個練習來了解插件開發）。我有一個名爲「onSelected」的回調，當你選擇一種顏色時會觸發，但它會打破插件的另一個功能（可切換樣本列表的可見性）。

我是新插件的開發，所以我敢肯定，這是一個簡單的錯誤我在做......

jsfiddle

插件：

(function ($) { 

$.colorPicker2 = function (el, options) { 


    // the wrapper around the colors 
    var $pickerContainer = $("<div>"); 


    // To avoid scope issues, use 'base' instead of 'this' 
    // to reference this class from internal events and functions. 
    var base = this; 

    // Access to jQuery and DOM versions of element 
    base.$el = $(el); 
    base.el = el; 

    // Add a reverse reference to the DOM object 
    base.$el.data("colorPicker2", base); 

    base.init = function() { 
     console.log("base.init"); 
     base.options = $.extend({}, $.colorPicker2.defaultOptions, options); 

     // Put your initialization code here 
     // code goes here 
     $.each(base.options.colors, function (index, value) { 

      var $item = $('<div class="colorPicker-colorOption">').css({ 
       "background-color": "#" + value 
      }) 

      $item.click(function() { 
       console.log("item.click"); 

       base.selectColor(value); 
      }) 

      $pickerContainer.append($item); 
     }); 

     //$pickerContainer.hide(); 
     base.$el.append($pickerContainer); 

     if (base.options.toggleElement != null) { 
      base.options.toggleElement.click(function (e) { 
       base.togglePicker(); 
       e.preventDefault(); 
      }); 
     } 

    }; 

    base.togglePicker = function() 
    { 
     $pickerContainer.toggle(); 
    } 

    base.selectColor = function (color) { 
     base.togglePicker(); 

     if (typeof base.options.onSelected == 'function') { 
      base.options.onSelected.call(this, color); 
     } 
    } 

    // Sample Function, Uncomment to use 
    // base.functionName = function(paramaters){ 
    // 
    // }; 

    // Run initializer 
    base.init(); 
}; 

$.colorPicker2.defaultOptions = { 
    colors: [ 
      '000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600', 
      '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', 
      '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 
      'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 
      'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF' 
    ], 

    toggleElement: null, 

    onSelected: function (color) { } 

}; 

$.fn.colorPicker2 = function (options) { 
    return this.each(function() { 
     (new $.colorPicker2(this, options)); 
    }); 
}; 

})(jQuery); 

如何掛鉤到onSelected事件：

$(function() { 
    $('#primaryColorPicker').colorPicker2({ 
     toggleElement: $('#selectPrimaryColor'), 
     onSelected: function (color) { 
      $('#selectedPrimaryColor').html("(#" + color + ")"); 
     } 
    }); 

}); 

HTML：

<a id="selectPrimaryColor">Toggle Color Picker</a> 
<span id="selectedPrimaryColor" /> 
<div id="primaryColorPicker"></div> 

Answer 1

你只需要學習如何編寫有效的HTML

更換

<span id="selectedPrimaryColor" /> 

與

<span id="selectedPrimaryColor"></span> 

FIDDLE