How remove the previous event?

Question

Hello,

tell me what I need to correct, to the repeated clicking on another cell TR previous events are deleted

Full example

$('table tbody tr').each(function() {
    $('table tr:even').addClass('even');

    $(this).hover(function(){
        $(this).toggleClass("active");
    });

    $(this).click(function(){
        $(this).closest('tr').toggleClass('visited');
    })

});

Answer 1

I'm guessing what you want to do is to remove the previous selection. Here's a working fiddle.

Basically, in this example I'm removing the visited class from all sibling rows:

$(this).siblings().removeClass('visited');

Also, is there any reason for using:

$(this).closest("tr").toggleClass('visited');

When you can just use:

$(this).toggleClass('visited'); // $(this) is a <tr>

Answer 2

You can do it by just adding a bit to your current .click() handler, like this:

$(this).click(function(){
  $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited');
});

You can test it out here. As you get more elements though, the row level handler gets less efficient and you should look at .delegate() instead, like this:

$('table tr:even').addClass('even');
$('table tbody').delegate('tr', 'mouseenter', function() { 
    $(this).addClass("active");
}).delegate('tr', 'mouseleave', function() {
    $(this).removeClass("active");
}).delegate('tr', 'click', function(){
  $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited');
});​

You can test that version here, if you don't go this route, at least move the
$('table tr:even').addClass('even'); outside the loop, it only needs to run once :)

Answer 3

How about this?

$('table tr:even').addClass('even');

$('table tr').hover(function() {
    $(this).toggleClass("active");
});

That would cover the even highlighting and hover. The other suggestions will work for the visited effect.

Answer 4

You can cut down your jQuery quite a lot, and cache for performance.

Here is the branched fiddle: http://jsfiddle.net/HTerC/

Here is the jQuery

$rows = $('table tbody tr');
$rows.click(function(){
    $(this).addClass('visited');
    $(this).siblings().removeClass('visited');
});

$rows.hover(function(){
    $(this).toggleClass('active');
});

You'll want to wrap it in a $(document).ready() as well

Answer 5

Made your JS more consise and I think I've sorted what you need to do

$('table tbody tr').hover(function(){
    $(this).toggleClass("active");
}).click(function(){
    $(this).addClass( "visited" ).siblings( ).removeClass( "visited" );
}).filter( ":even" ).addClass('even');

So you have hover colouring, click for visited, deselect others, I don't know if you want to click deselect as well, if you do just change addClass back to toggleClass.