Question

i’m sure that’s silly thing but id don’t know what i’m doing wrong

i have a method that create’s a table into a panel asp with some element’s. Also i have two events, hover and click the hover works great too, but css that i need to set in the element don’t appears when the even it’s click. what i’m doing wrong bucause i put a alert in the function and works fine. thanks for your time mi code below.

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

It looks like the style from the click event is going to be overwritten by the styles from the hover event. So to click on the div, you trigger mouseOver() first, and the border is set to 2px solid black. Then you click, and the setElement() function re-sets the border to 2px solid black. You don’t see anything change. Then you move your cursor off of the div to see the change and you trigger mouseOut() which will remove the border.

I’m assuming that what you want is for the border to persist once the div has been clicked on. You could set some kind of data attribute on the div to say that it is selected.

function setElement() {
    $(this).css('border', '2px solid black').data('selected', true);
}

Then check for that in the mouseOut() function.

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