时间戳

首页 > 解决方案 > 使用 jQuery Spectrum Color Picker 调用 Ajax 函数时防止错误

jquery - 使用 jQuery Spectrum Color Picker 调用 Ajax 函数时防止错误

问题描述

我正在使用 jQuery Spectrum 并尝试在颜色更改时调用另一个函数。

然而，另一个函数有一个 ajax 调用，当它运行时，我得到这个错误：

spectrum.js?ver=1.0.7:1277 未捕获类型错误：无法读取未定义的属性“getBrightness”

我认为这与通话的同步性有关，但不确定如何解决。

            jQuery('#mydiv').spectrum({
                preferredFormat: "rgb",
                showAlpha: true,
                showPalette: true,
                showInitial: true,

                showSelectionPalette: true,
                palette: ['rgba(0, 0, 0, 0)'],
                showInput: true,
                allowEmpty: true,
                move: function(c) {

                 my_function(c);


                },
                change: function(c) {

                  my_function(c);

                }
            });

然后我调用的函数是这样的：

function my_function(color) {



        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            datatype: 'JSON',
            data: {
                action: 'update_data',
                color: color,
          
            },
            success: function(data) {

              


            }

        });


}

我能做些什么来使它正常工作吗？

这是一个也提供错误的 JSFiddle：

https://jsfiddle.net/xstatic/8px3ynq0/11/

标签： jqueryspectrumjs

解决方案

$(document).ready(function() {
  $('#custom').spectrum({
    preferredFormat: "rgb",
    showAlpha: true,
    showPalette: true,
    showInitial: true,
    showSelectionPalette: true,
    palette: ['rgba(0, 0, 0, 0)'],
    showInput: true,
    allowEmpty: true,
    change: function(color) {
      console.log(color.toRgbString());
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.0.7/spectrum.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.0.7/spectrum.min.js"></script>
<input type='text' id="custom" />

这是一个使用 ajax 调用作为 jsfiddle 的工作示例：https ://jsfiddle.net/bogatyr77/npekLc20/4/

推荐阅读