jQuery weirdness. Div becomes attached to chained element markup?

I've got a div in my app that is displayed each time my theme options panel is saved.

The markup is...

<form method="post">

<?php
if ( $_REQUEST['saved']) { ?>
<div id="message" class="updated fade"><p>Sweet! The settings were saved :)</p></div>
<script type="text/javascript"> $('#message').delay(3000).fadeOut(3000);</script>
<?php }?>

This has the effect of showing the div (which is absolutely positioned to overlay the interface). I'm also using jQuery to fade the message offscreen after 3 seconds.

This works fine, however, when I add a bit of script to my other jQuery chain (see the commented out block below), the message div is only visible when the jPicker popup appears. If I remove those bits of code (the jPicker call), my message div behaves properly, but I soon as I add the jPicker to the chain, the message div malfunctions (literally :).

$(function()
{

$("#carousel").jCarouselLite
(
    {
    btnNext: ".next",
    btnPrev: ".prev",
    visible: 6,
    speed: 700
    }
);

$('#carousel').show();

$('#myTheme').change
(
    function() 
    {
    var myImage = $('#myTheme :selected').text();
    $('.selectedImage img').attr('src','../wp-content/themes/myTheme/styles/'+myImage+'/screenshot.jpg');
    }
);

$('#carousel ul li').click
(
    function(e) 
    {
    var myOption = $(this).children('img').attr('title');
    $("#myTheme option[value='"+myOption+"']").attr('selected', 'selected');
    $("#myTheme").css('backgroundColor', '#A9A9A9').animate({backgroundColor: "#ffffff"}, 'slow');
    }
);

$('#carousel ul li').hover
(
    function(e) 
    {
    var img_src = $(this).children('img').attr('src');
    $('.selectedImage img').attr('开发者_如何学JAVAsrc',img_src);  
    }
    ,function()
    {
    $('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');
    }
);
 /*
$('#myTheme_sidebar_color').jPicker
(
    {},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
);
*/
});

This is Chris Tillman, the developer of the jPicker plugin. I am not sure why you are experiencing this particular issue, and it may have nothing to do with the jPicker plugin, but I did notice one issue in your code.

I am looking at your callback functions you have commented out, and I am trying to figure out what $(this) is supposed to signify. The "this" object is going to reference the javascript context in which the callback was fired, and may not be the object you are expecting it to be. If you want to make certain you are referencing the object you want, you should declare an instance of it outside the jPicker call and reference that variable in the callback.

I believe in most cases that the context that would be used in your example would either be the jPicker object itself, or the container, or possibly even the whole DOM window itself, which would mean you are setting the val of something you don't want to be. If you want to check your context, assign a global variable equal to $(this) and then use Firebug to see what it is.