Home/ Questions/Q 8071231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:39:02+00:00

I was using the $.click() method for triggering some events. But then I needed

  • 0

I was using the $.click() method for triggering some events. But then I needed to set some events for some HTML elements before the elements were declared. Let’s take this as an example:

<script>
    $('div.hide').click(function() {
        $('div.hide').css({'display' : 'none'});
     });
</script>
<div class="hide">some text</div>

The downside is that when setting the .click() method, the div.hide elements doesn’t exist, so no trigger is set.

So I turned to the .on() method, like so:

<script>
    $('div.hide').on('click', function() {
        $('div.hide').css({'display' : 'none'});
    });
</script>
<div class="hide">some text</div>

But this also doesn’t work. I thought calling .on() would make all existent and future div.hide elements trigger the 'click' function().

I managed to get past this inconvenience, but for my own knowledge I’d like to know what was I doing wrong. Is there no way to assign a trigger to future HTML elements?

My solituion was:

<script>
    $(document).ready( function() {
        $('div.hide').click(function() {
            $('div.hide').css({'display' : 'none'});
        });
    });
</script>
<div class="hide">some text</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You missed the three-argument version:

    $('body').on('click', 'div.hide', function() { ... });

    That puts the handler on the <body> but it catches the events that bubble and invokes the handler when the target element matches the selector (the second argument).

    The handler doesn’t have to go on the <body>; it can be any parent container element of your <div>.

    The “on” method replaces the older “live” and “delegate” methods, as well as “bind” itself.

    • 0