problem with click event jquery

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');

}

Your question is really unclear. Could you try to proofread what you've written and reword it? — Matt Ball
– Matt Ball, Commented May 26, 2011 at 23:23
I highly recommend not using so much html markup in your code. — pixelbobby
– pixelbobby, Commented May 26, 2011 at 23:28
@Matt Ball hi, in resume i don't know why in my event click don't set the css style that i put in my code — Jorge
– Jorge, Commented May 26, 2011 at 23:30

AaronShockley · Accepted Answer · 2011-05-26 23:34:22Z

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);
    }
}

mrk · Accepted Answer · 2011-05-26 23:27:45Z

1

The mouseOver function sets the same css border, so perhaps setElement is executing, but since the border is already "2px solid black" you don't see a change from setElement also trying to set border to "2px solid black".

Try this?
In setElement, set border to "3px solid red".

answered May 26, 2011 at 23:27

mrk

5,1273 gold badges29 silver badges42 bronze badges

1 Comment

Jorge Over a year ago

Koopman i see the problem set's the css but the element had the hover when you go out makes the function, it's there a way to validate when it's click don't do the mouseOut

Collectives™ on Stack Overflow

problem with click event jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related