jQuery étrangeté. Div devient attaché au balisage de l'élément chaîné?

Question

J'ai une div dans mon application qui s'affiche chaque fois que mon panneau d'options de thème est enregistré.

Le balisage est ...

<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 }?> 

Cela a pour effet de montrer la div (qui est tout à fait bien placé pour superposer l'interface). J'utilise également jQuery pour faire disparaître le message hors écran après 3 secondes. Cela fonctionne très bien, cependant, quand j'ajoute un peu de script à mon autre chaîne jQuery (voir le bloc commenté ci-dessous), le div div n'est visible que lorsque le popup jPicker apparaît. Si je supprime ces bits de code (l'appel jPicker), mon message div se comporte correctement, mais dès que j'ajoute le jPicker à la chaîne, le message div dysfonctionne (littéralement :).

$(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('src',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()); 
    } 
); 
*/ 
}); 

Answer 1

Voici Chris Tillman, le développeur du plugin jPicker. Je ne sais pas pourquoi vous rencontrez ce problème particulier, et cela n'a peut-être rien à voir avec le plugin jPicker, mais j'ai remarqué un problème dans votre code. Je regarde vos fonctions de rappel que vous avez commentées, et j'essaie de comprendre ce que $ (this) est censé signifier. L'objet "this" va référencer le contexte javascript dans lequel le callback a été déclenché, et peut ne pas être l'objet que vous attendez. Si vous voulez vous assurer que vous référencez l'objet que vous voulez, vous devez en déclarer une instance en dehors de l'appel jPicker et référencer cette variable dans le rappel.

Je crois dans la plupart des cas que le contexte qui serait utilisé dans votre exemple serait soit l'objet jPicker lui-même, ou le conteneur, ou peut-être même toute la fenêtre DOM lui-même, ce qui voudrait dire que vous définissez le val de quelque chose tu ne veux pas être. Si vous voulez vérifier votre contexte, attribuez une variable globale égale à $ (this), puis utilisez Firebug pour voir de quoi il s'agit.