在页面加载时运行Jquery代码一次

Run Jquery code once on page load

本文关键字：一次 代码 Jquery 加载 运行      更新时间：2023-09-26

我有两个表单字段（十六进制颜色），当用户点击它们时就会激活。

如果用户正在编辑现有的数据集，那么我会加载颜色，并在页面加载时将其显示在字段中。加载页面时如何运行脚本，以便在字段旁边显示正确的颜色？

那么，当页面加载时，我如何运行$('#colorpicker1').colpick()和$('#colorpicker2').colpick()呢？

我运行的脚本是http://colpick.com/plugin（示例#1，但页面加载时字段中的数据已就绪）

感谢

$(document).ready(function (){
$('#colorpicker1').colpick({
        layout:'hex',
        submit:0,
        onChange:function(hsb,hex,rgb,el,bySetColor) {
            $(el).css('border-color','#'+hex);
            // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
            if(!bySetColor) $(el).val(hex);
        }
    }).keyup(function(){
        $(this).colpickSetColor(this.value);
    });

    $('#colorpicker2').colpick({
        layout:'hex',
        submit:0,
        onChange:function(hsb,hex,rgb,el,bySetColor) {
            $(el).css('border-color','#'+hex);
            // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
            if(!bySetColor) $(el).val(hex);
        }
    }).keyup(function(){
        $(this).colpickSetColor(this.value);
    });
});

请参阅引用的plunker，JS&颜色选择器的CSS已从您链接的网站中获取。

http://plnkr.co/edit/nYSY6b7JJwdHXJ7SmcdP?p=preview

理想情况下，这种模式可以解决您的问题-

<script>
$(function(){
  $(".className").colpick({
  /*
     Inner Code.
  */
  });
});
</script>

编辑：好的，所以你的问题和插件无关。看看更新后的plunker-http://plnkr.co/edit/nYSY6b7JJwdHXJ7SmcdP?p=preview

$.each($('.colorpicker'),function(){
      $(this).css('background','#'+$(this).val());
});

这将解决您的问题，因为插件没有任何方便的方法/选项。

EDIT-最终解决方案

要加载输入字段中已经存在的颜色，并正确激活脚本，以下是操作方法：

 $.each($('.colorpicker'),function(){
        //init code
        var defCol = $(this).val();
        $(this).css('border-color','#'+defCol);
        //plugin
        $(this).colpick({
            layout:'hex',
            submit:0,
            color: defCol,
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });
    });

$(window).load(function(){
    $('#colorpicker1, #colorpicker2').colpick()
});

试试这个：

Jquery提供onload或ready函数以在加载时执行脚本-

$（document）.ready（function）｛

  alert("document ready occurred!");

})；

$（window）.load（function）｛

  alert("window load occurred!");

})；

在文档准备就绪时执行一些功能：

$(document).ready(function(){
    $('#colorpicker1').colpick()
    $('#colorpicker2').colpick()
})

$( document ).ready()就是您所需要的。

这样使用：

$( document ).ready(function(){
  // the document is ready now, do stuff here
});

$（document）.ready（）| jQuery学习中心

相关文章：