颜色选择在第一次点击时不起作用.它在第二次点击时工作 - colorpick is not working on first onclick.It works on second click..needs answer

colorpick is not working on first onclick.It works on second click..needs answer

<a href='#' onClick ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
<img src='". Yii::app()->baseURL.'/images/color.png'."'></a>

这里我调用 backcolor 函数（重要 - 它在控制器中），它的定义如下。

   function backcolor() {
            $('.pagecolor').colpick({
                   onSubmit:function(hsb,hex,rgb,el){
                    var divid = $(el).closest('div').attr('id');
                    $('#'+divid).css('background-color', '#'+hex);
                    $(el).colpickHide();
                    $.ajax({
                          url:baseURL+'/index.php/MyPhotoBooks/addbackground',
                          type:'POST',
                          data:{color:hex,divid:divid},
                          success:function(){   
                                //$("#"+divid).css('height', '80%');
                        },
                    }); 
                }   
            });
        };

它仅适用于第二次单击。对于第一次单击颜色选择不显示..

这

完全是预期的行为。

您似乎在单击同一元素时将颜色选择绑定到元素。您需要在页面加载时执行此操作。

推荐的解决方案：

将onClick更改为onload。这将确保在加载元素时，颜色选择器绑定到它。接下来，当单击颜色选择器元素时，它应该可以工作。

<a href='#' onClick ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >

自

<a href='#' onload ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >

-----替代方法---------

单击元素时显示颜色选择由插件自动处理。因此，只需将您的函数代码更改为

$(function(){
        $('.pagecolor').colpick({
               onSubmit:function(hsb,hex,rgb,el){
                var divid = $(el).closest('div').attr('id');
                $('#'+divid).css('background-color', '#'+hex);
                $(el).colpickHide();
                $.ajax({
                      url:baseURL+'/index.php/MyPhotoBooks/addbackground',
                      type:'POST',
                      data:{color:hex,divid:divid},
                      success:function(){   
                            //$("#"+divid).css('height', '80%');
                    },
                }); 
            }   
        });
});

这将确保在页面加载时绑定。还要确保从 .pagecolor 元素中删除onclick处理程序。