Question

在我的网站中，我添加了一个jQuery颜色选择器文本框，如：

http://www.eyecon.ro/colorpicker/

通过ajax加载页面时，此颜色选择器无效。这意味着在ajax调用之后颜色选择器不起作用。

我该如何解决这个问题？

我的网站是CodeIgniter网站：

这是我的索引页面源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rock website</title>
<link href="<?php echo base_url();?>style/style_user_admin.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>style/jquery-jvert-tabs-1.1.4.css" />

<script type="text/javascript" src="<?php echo base_url();?>/js/ajaxupload.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.1.min.js"></script>

<script type="text/javascript" src="<?php echo base_url();?>js/colorpicker.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/eye.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/utils.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/layout.js?ver=1.0.2"></script>
<link rel="stylesheet" href="<?php echo base_url();?>css/colorpicker.css" type="text/css" />


<script type="text/javascript" src="<?php echo base_url();?>js/jquery-jvert-tabs-1.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>js/jquery.cleditor.css" />
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.cleditor.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    page_setup();
});
</script>

<script type="text/javascript">
    function page_setup()
    {
        $.ajax({  
                    type: "POST",  
                    url: "<?php echo base_url();?>index.php/super_admin/page_setup/",
                    success: function(msg){
                    //alert(msg);
                    $("#page_setup").html(msg).show();
                    }  
                });
    }
</script>
</head>

<body>
<div class="wraper">
<div class="welcome_to_admin">
Super Admin Panel
</div>
<div class="admin_main">
<div id="vtabs1">
    <div>
        <ul>
            <li><a href="#page_setup" onclick="return page_setup();">Page Setup</a></li>
        </ul>
    </div>
    <div>
        <div  id="page_setup">
            <!--
            load the page_setup.php page here
            -->
        </div>
    </div>
</div>
</div>
</div>
</body>
</html>

这是super_admin控制器代码：

public function page_setup()
    {
        $this->load->view('super_admin/page_setup');
    }

这是page_setup.php页面代码：

<div class="tab1_rgt_part">
<div class="message_to_send_11">Color Settings</div>
  <div class="tab1_main_part" style="margin-top:20px;">
  <div class="tab1_left_part">Welcome Page Bg Color</div>
<input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" />
</div>

Answer 1

在加载html后尝试添加颜色选择器：

function page_setup()
    {
        $.ajax({  
                    type: "POST",  
                    url: "<?php echo base_url();?>index.php/super_admin/page_setup/",
                    success: function(msg){
                    //alert(msg);
                    $("#page_setup").html(msg).show();
                    $("#colorpickerField1").ColorPicker(
                     onChange: function (hsb, hex, rgb) {   
                        $(this).val(hex);
                     }
                    );
                    }  
                });
    }

Answer 2

    $('#colorpickerField1, #colorpickerField2, #colorpickerField3,#colorpickerField4).ColorPicker({
    onSubmit: function(hsb, hex, rgb, el) {
        $(el).val("#"+hex);
        //$(el).css("background-color","#"+hex);
        $(el).ColorPickerHide();
    },
    onBeforeShow: function () {
        $(this).ColorPickerSetColor(this.value);
    }
})

我找到了答案。将此代码添加到视图页面顶部的脚本标记中

ajax调用后Jquery颜色选择器无法正常工作

2 个答案: