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

Answer 1

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/