Question

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

由于某种原因，随插件提供的onchange事件似乎是在页面加载时触发。我无法弄清楚为什么。这是我的行为还是插件本身的问题？

示例

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

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

Answer 1

我认为它是插件中的内容，我看到的功能如下：

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

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

它还有一个函数_resetSwatches()。所以它可能是插件作者想要的问题或某些东西。

例如：设置默认颜色，触发onchange并将div背景更改为此颜色。

Answer 2

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

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

通过搜索＆＃34; onChange＆＃34;查看来源。并按照函数调用的踪迹！

Answer 3

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

_updateAllElements（）函数正在触发onchange事件

function _updateAllElements(disableinputupdate) {
    ...

    settings.onchange(container, color);

    ...
  }

_buildComponent（）函数在颜色滑块的初始化处触发。

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

拥有一堆“activateGroup”函数后，对于所有颜色滑块mods。在测试中我使用了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();
            }
        });

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

3 个答案: