how to limit a click event applied to the <body> from executing on a jquery datatable in the body

Question

I have animated datatables which slide in from the left when their hyperlink is clicked. And when the user is done reading the contents of the visible datatable, I applied the following code to allow the user to click anywhere else to park the table away and proceed with viewing. I used jQuery code for attaching the click event...

<script type="text/javascript" charset="utf-8">
    $(document).ready( function () {$('.dtable').dataTable( {"sDom": 'rt',"sScrollY":"200px", "bPaginate":false, "bFilter":false} );**$('body').click(function() {parkDataTables();});})
</script>

Unfortunately, clicking on the datatable itself parks it. And I don't want that behavior. Maybe someone has an idea on how to block this click event from firing on the surface of the datatable...

Many thanks

Dennis

Same problem with accepted answer here: stackoverflow.com/questions/3956565/… — Renato
– Renato, Commented Jan 20, 2012 at 19:56

Abe Petrillo · Accepted Answer · 2012-01-20 19:33:09Z

2

Instead of using body as the selector you could use

$('body').children().not('.dtable')

So you would get

<script type="text/javascript" charset="utf-8">
$(document).ready( 
  function () {
   $('.dtable').dataTable( {"sDom": 'rt',"sScrollY":"200px", "bPaginate":false, "bFilter":false} );
$('body').children().not('.dtable').click(function() {
  parkDataTables();
 });})
</script>

answered Jan 20, 2012 at 19:33

Abe Petrillo

2,45824 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yogurt The Wise Over a year ago

Yes, i've used the NOT selector for something like this before, it should work very well.

Renato Over a year ago

This will only work if your dtable is an immediate child of the body.

DKean Over a year ago

Sounds right, but it still parks. Could it be that the DIV of the dTable is responding?

DKean Over a year ago

I implemented @Renato's 2nd suggestion. Thanks for your help!

Abe Petrillo Over a year ago

no problem, as a side note, you could use $('body').find('*').not('.dtable'). Nice alternative @Renato :)

Renato · Accepted Answer · 2012-01-20 19:49:30Z

0

You should do it with

$('.dtable').click(function(){return false;});

The problem is that when you click on the table, the event goes into the table first and then it propagates to the parents (and finally to the body, when the parkDataTables is catched).

You could also use stopPropagation instead ( http://api.jquery.com/event.stopPropagation/ ), because with the return false you also stop the default click behavior on the table.

$('.dtable').click(function(event){
    event.stopPropagation();
});

Maybe you could check this page to see this last difference: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

answered Jan 20, 2012 at 19:49

Renato

60015 silver badges24 bronze badges

1 Comment

DKean Over a year ago

This one worked great and it was easy to implement. Many thanks for the help! Had to add the DIV to the table.. $('.dtable').click(function(event){event.stopPropagation()}); $('.ctnr').click(function(event){event.stopPropagation()});

cyrusv · Accepted Answer · 2012-01-20 19:34:52Z

0

Jquery propagates the function up through every parent. In order to stop the propagation, you must "return false;".

In your case, you want to try:

> $('body').click(function() { if $(this).hasClass('dtable'){return
> false;}) if $(this).hasClass('body'){park}

And give your body a class of 'body' to make it selectable.

answered Jan 20, 2012 at 19:34

cyrusv

2473 silver badges15 bronze badges

2 Comments

Abe Petrillo Over a year ago

Think it is better to get the selector right in the first place, as theoretically he now has two click events on the dtable class

DKean Over a year ago

Thank you for the help. Because of the added if statements I went with @Renato's second suggestion. It worked. Many thanks for your help.

Collectives™ on Stack Overflow

how to limit a click event applied to the <body> from executing on a jquery datatable in the body

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related