Home/ Questions/Q 8833517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:47:54+00:00

I’m using the on handler to register to the register to the ‘body’ element

  • 0

I’m using the on handler to register to the register to the ‘body’ element and fire an event whenever an element which is not in a specific div.
Therefor I’m using the not selector to filter out all those elements. However if I click the element, the event is fired twice, instead of once.

Am I misunderstanding the not selector?

Fiddle sample: http://fiddle.jshell.net/kHbH9/

Sample code

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $('body').on('click', ':not(#toolbar)', function(){
                    $('body').append('clicked<br/>')
                });
            });

        </script>
    </head>
    <body>
        <div id"toolbar">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <h1>Click here</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The culprit is id"toolbar" which should be id="toolbar". You can use stopPrapagation method which prevents the event from bubbling. 

    $(function() {
    $('body').on('click', function() {
         $('body').append('clicked<br/>')
    });
    $('#toolbar').click(function(e) {
        e.stopPropagation()
    })
});

    http://fiddle.jshell.net/PHkbR/

    • 0