jquery-colorpickersliders onChange 事件在页面加载时触发答案

【问题标题】：jquery-colorpickersliders onChange event firing on page loadjquery-colorpickersliders onChange 事件在页面加载时触发
【发布时间】：2014-03-13 22:57:43
【问题描述】：

我正在使用插件 Bootstrap 颜色选择器滑块。该插件的文档在这里：http://www.virtuosoft.eu/code/jquery-colorpickersliders/。

由于某种原因，插件提供的 onchange 事件似乎在页面加载时触发。我不知道为什么。这是我做的还是插件本身的问题？

示例

这是我的意思：http://jsfiddle.net/bV7qF/

<div class="hsl"></div>

$(".hsl").ColorPickerSliders({
    flat: true,
    previewformat: 'hsl',
    order: {
        hsl: 1,
        preview: 2
    },
    onchange: function() {
        alert("test");
    }
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap plugins

【解决方案1】：

是的，看起来插件在初始化时调用了 onchange 处理程序（通过上面的代码）。查看源代码。这是它的链接： http://www.virtuosoft.eu/code/jquery-colorpickersliders/jquery-colorpickersliders/v4.1.7/jquery.colorpickersliders.js

此函数：_updateAllElements(); 调用 settings.onchange(container, color); _updateAllElements(); 本身在插件加载时被调用（通过上面的代码），在其init(); 方法中......

通过搜索“onChange”查看源代码并跟踪函数调用！

【讨论】：

【解决方案2】：

我认为这是插件中的东西，我看到的功能如下：

function _addCurrentColorToSwatches() {
    swatches.unshift(color.tiny.toRgbString());
    _storeSwatches();

    $(document).trigger("colorpickersliders.changeswatches");
}

它还有一个函数_resetSwatches()。所以这可能是插件作者的问题或意图。

例如：设置了默认颜色，onchange 被触发，一个 div 背景将被改变为这个颜色。

【讨论】：

【解决方案3】：

我认为解决方案就在这里。

_updateAllElements() 函数正在触发 onchange 事件

function _updateAllElements(disableinputupdate) {
    ...

    settings.onchange(container, color);

    ...
  }

_buildComponent() 函数在颜色滑块初始化时触发。

     function _buildComponent() {
        _initElements();
        _renderSwatches();
        _updateAllElements();//comment or delete this line
        _bindControllerEvents();
      }

在您拥有一堆“activateGroup”功能后，适用于所有颜色滑块模块。在测试中我使用的是 Swatches mod，所以我修改了 activateGroupSwatches() 函数

  function activateGroupSwatches() {

    ...

    _updateAllElements(true);//comment or delete this line

    ...
  }

我只用这个配置做了几个测试，但它似乎工作。页面加载时不触发onchange函数，之后该函数起作用。

$("#color").ColorPickerSliders({
            flat: true,
            color: '#fff',
            swatches: tab,
            customswatches: false,
            order: {},
            onchange: function(container, color){
                    function_you_want();
            }
        });

【讨论】：