how to limit a click event applied to the 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: http://stackoverflow.com/questions/3956565/clicking-on-div-fires-binding-for-body-click — Renato, Jan 20 '12 at 19:56

score 2 · Answer 1 · answered Jan 20 '12 at 19:33

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 '12 at 19:33

Abe Petrillo

2,368
23
34

Yes, i've used the NOT selector for something like this before, it should work very well. – Yogurt The Wise Jan 20 '12 at 19:37
This will only work if your `dtable` is an immediate child of the body. – Renato Jan 20 '12 at 19:53
Sounds right, but it still parks. Could it be that the DIV of the dTable is responding? – DKean Jan 20 '12 at 19:57
I implemented @Renato's 2nd suggestion. Thanks for your help! – DKean Jan 20 '12 at 20:16
no problem, as a side note, you could use $('body').find('*').not('.dtable'). Nice alternative @Renato :) – Abe Petrillo Jan 20 '12 at 23:37

score 0 · Answer 2 · answered Jan 20 '12 at 19:34

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 '12 at 19:34

cyrusv

247
3
15

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 – Abe Petrillo Jan 20 '12 at 19:36
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. – DKean Jan 20 '12 at 20:17

score 0 · Accepted Answer · answered Jan 20 '12 at 19:49

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/

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()}); — DKean, Jan 20 '12 at 20:13

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

3 Answers3

Linked