21

I know about jquery .on() use and purpose, because I use it.

But I want to know what is the difference between $(document).on() vs $(element).on() in this script:

<html>
...
<body>
...
  <table id="table-user">
    <thead>...</thead>
    <tbody>
      AJAX DYNAMIC CONTENT
    </tbody>
  </table>
....
<script>
  $(document).on('click','.btn-edit',function(){
    go_edit();
  });

  $('#table-user').on('click','.btn-edit',function(){
    go_edit();
  });

</script>
</body>
</html>

is any performance different or something else between them?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
plonknimbuzz
  • 2,594
  • 2
  • 19
  • 31
  • 1
    Possible duplicate of [Difference between $(document).on and $('#submit').on](http://stackoverflow.com/questions/27813791/difference-between-document-on-and-submit-on) – Nick.Mc Jan 24 '17 at 06:05
  • owh man. i got the answer. thank you very much – plonknimbuzz Jan 24 '17 at 06:09
  • 1
    my experience is to do '$(document).on()' in situations when content can change dynamically. The newly appeared content isn't binded with the $("#element").click() and similar. – Fanky Feb 13 '19 at 12:12

3 Answers3

26
$(document).on('click','.btn-edit',function()

This binds a click event to the document and all child elements within it. This method is referred to as delegated event handling.

$('#table-user').on('click','.btn-edit',function()

binds the click event to the #table-user directly. captures the event directly on the element.

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
  • 2
    @plonknimbuzz: It is better to handle events at the higher nodes, if possible. like if there is a table with button on each row, then instead of registering an event on each button, it is better to register that event with the table itself and write codes to perform the desired actions on the table event handler. – Yeasir Arafat Majumder Jan 24 '17 at 07:04
20

Main difference is already answered by @Mukesh. I will try to add one more thing.

When you click(or any other event) on an element(like div or button) in the html document, that clicking event is propagated to the parent elements of that element. So if you have structure like this:

<div>
    <table>
        <tr>
            <td>
                <button>Click Me</button>
            </td>
        </tr>
    </table>
</dvi>

and you click on the button, that click will propagate to the td, then to the tr, then to the table and then finally to the document itself.

Now lets say you have registered a click event on the document($document.on('click',...)) and also on the button($(button.on('click',...))), both of which does some different actions. Then if you click on the button, the corresponding button action will be executed, and also the corresponding action of the $(document) will also be executed.

To prevent the button click to propagate to the document itself, you need to take actions on the button click handler(like stopPropagation etc.)

Yeasir Arafat Majumder
  • 1,222
  • 2
  • 15
  • 34
5

What if the Node doesn't exist in the DOM.

Consider the case when the node whose events you want to listen does not yet exist in the DOM. Then $(document).on('event', 'child-selector', callback); proves very helpful.

Mooze
  • 436
  • 5
  • 9