Clicking on row and on links in the row

Unfortunately I wasn't able to come up with a better title. Here's my problem. I have a table (HTML). I would like a solution where if I click anywhere on the rows, it shows me details about that row in overlay. This part is ok, I can do that with jQuery TOOLS. But I also have links in certain columns, and when I click on them, I don't want this overlay to pop up. I'm sorr开发者_开发百科y if this question was already answered, but I couldn't find it anywhere. Any ideas? Thanks!

Solution 1: Prevent event bubbling on links

Choose a selector that fits your needs for those links:

$("table tr td a").click(function(evt){
    // will prevent bubbling of click event
    evt.stopPropagation();
})

As you can see this works at the source of event (link itself). This will stop click event propagation to your table row hence detail overlay/popup won't execute. But this will only work if you're not using live/delegate event registration.

Solution 2: Checking event target

This solution check in your table row's click event whether target is not a link. Keep your table row selector as is (this one here's just for the proof of concept):

$("table tr").click(function(evt) {
    if (evt.target.nodeName.toLowerCase() != "a")
    {
        // functionality you're running now
    }
});

This will make sure that you will be showing that popup only when anything else has been clicked than an anchor A element. This solution works at the destination compared to solution 1.

Special notes

If you're using live (or delegate) event registration for your links, solution 1 won't work at all. Solution 2 is the one to go with in that particular case. live/delegate actually registers event with some upper ancestor element in the DOM tree (live with document itself) that checks selector match on the execution. If you'd cancel event bubbling, live events wouldn't trigger at all because thy require event propagation/bubbling.

You could solve this by generating the nth-column you wan't to have different behaviour with a designated class:

Let's say this is your row:

<tr>
  <td>1</td>
  <td>2</td>
  <td class="dont-process-click">3</td>
  <td>4</td>
</tr>

...

And have you're click event run only if the clicked td doesn't have that class.

            $("td").click( function() {
                if(! $(this).hasClass('dont-process-click')) {
                    alert('Do something');
                }
            });

Add a class on link columns and select other columns in jquery selector to show pop up. Hope It helps

$(function(){

  $('.row').click(function(event){

    if($(event.target).is('a.special')){  // if it's special, than don't pop-open modal

      return false;

    }

    // Open modal.

  });

});

Write two click function in jquery for table td and table td a elements.for examples : $(document).ready(function(){ //for tr click $('table tr').click(function(){ // generate overlay });

//for anchor $('table tr td a').click(function(){ //do something });
});