CODEWITHSUNDEEP
javascriptjquery
Steve
Steve

Reputation: 4898

Javascript event not bubbling

I have the markup below:enter image description here

And I have some jQuery I just added to toggle the row color: enter image description here

Clicking anywhere in the row switches the view, as below:

enter image description here

The problem is that since I added the toggle function the links don't work. The toggle handler seems to capture the event. I would expect the link to get the event first and then the row, so the link should work fine.

Does anyone see the problem?

Thanks

Upvotes: 1

Views: 583

Answers (1)

vinczemarton
vinczemarton

Reputation: 8156

The main problem here is that toggle() is not what you use it for.

Check: http://api.jquery.com/toggle/

It makes the matched element hide and show according to it's current state.

What you might want to use is toggleClass() based on your example.

Also it's not clear from your question that what is the purpose of your javascript. When (on what event) you want to change an item's color? On clicking it?

You are clearly misusing the toggle() function, but I'm not sure when and what do you want to happen.

EDIT: I see you were aiming for the toggle event which is deprecated.

EDIT2: I have made you a jsfiddle which I think does what you want.

http://jsfiddle.net/kytJ3/1/

The html:

<div id="test" class="test-class">DURP<br />HURP<br />
    <a href="http://google.com" target="_blank">A LINK</a>
</div>

The js:

$('#test').click(function () {
    $(this).toggleClass('test-class');
});

The css:

div {
    color: red;
}
.test-class {
    color: blue;
}

This also results in cleaner (style free) javascript. And the link works fine.

Upvotes: 1

Related Questions