événement click jquery

Question

je suis sûr que ce truc stupide, mais id ne sais pas ce que je fais mal

j'ai une méthode qui est de créer une table dans un asp de panneau avec un élément de. Aussi, j'ai deux événements, survolez et cliquez sur le hover fonctionne très bien aussi, mais CSS que je dois définir dans l'élément n'apparaît pas quand le même il est cliqué. ce que je fais mal parce que je mets une alerte dans la fonction et fonctionne bien. merci pour votre code mi temps ci-dessous.

function buildImageGallery(data) { 

//boring code 
$(".pnlImage tr").remove(); 
var tableSelector = '<table class="tableFinder" id="imageSelectorPanel">'; 
tableSelector = tableSelector + '<tr>'; 
var imagesData = data.d.split(";"); 
for (var i = 0; i < imagesData.length; i++) { 
    if (i != imagesData.length - 1) { 
     var image = imagesData[i].split(","); 
     tableSelector = tableSelector + '<td>' + '<div id="' + image[0] + '" ' 
      + 'class="imagePanel" style="background:url(' + image[1] 
      + ');background-repeat:no-repeat;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;">' + "</div>" + "</td>"; 
    } 
} 

tableSelector = tableSelector + '</tr>'; 
tableSelector = tableSelector + '</table>'; 
$(".pnlImage").append(tableSelector); 
//the two events 
$(".imagePanel").hover(mouseOver, mouseOut); 
$(".imagePanel").click(setElement); 
} 

function mouseOver() { 
$(this).stop(true, true).animate({ 
    opacity: 0.25 
}, 100, function() { 
    $(this).css('border', '2px solid black'); 
}); 
} 

function mouseOut() { 
$(this).stop(true, true).css('border', '0 none').animate({ 
    opacity: 1 
}, 100); 
} 
//this method executes but don't add the style 
function setElement() { 
// alert("click the element with id: " + this.id); 
$(this).css('border', '2px solid black'); 

} 

Answer 1

Il semble que le style de l'événement click soit remplacé par les styles de l'événement hover. Donc, pour cliquer sur la div, vous devez d'abord déclencher mouseOver() et la bordure est définie sur 2px solid black. Ensuite, vous cliquez sur et la fonction setElement() redéfinit la bordure à 2px solid black. Vous ne voyez rien changer. Ensuite, vous déplacez votre curseur hors de la div pour voir le changement et vous déclenchez mouseOut() qui va supprimer la bordure.

Je suppose que ce que vous voulez, c'est que la bordure persiste après avoir cliqué sur la div. Vous pouvez définir une sorte d'attribut de données sur la div pour dire qu'elle est sélectionnée. Puis, vérifiez la fonction mouseOut().

function mouseOut() 
{ 
    if (!$(this).data('selected')) { 
     $(this).stop(true, true).css('border', '0 none').animate({ opacity: 1}, 100); 
    } 
} 

Answer 2

La fonction mouseOver définit la même css frontière, donc peut-être setElement est en cours d'exécution, mais étant donné que la frontière est déjà « 2px solide noir » vous ne voyez pas un changement de setElement aussi essayer de mettre en frontière « 2px noir uni ".

Essayez ceci?
Dans setElement, définissez la bordure sur "3px rouge fixe".