What is the difference between these Jquery examples?

Question

I've seen various ways to attach event handlers using JQueryy and although each seem to work, I'm just not sure if they are at all different or if either are deprecated.

$(document).on("click", ".someSelector", function (event) {
  // do work...
});

$(function () {
  $(".someSelector").click(function (event) {
    // do work...
  });
});

It's explained in the documentation on the [`.on()`](https://api.jquery.com/on/) method -> _"Direct and delegated event handlers"_ — Andreas, Mar 29 '19 at 16:53

score 2 · Accepted Answer · answered Mar 29 '19 at 16:53

2

The first example works whether or not there's an element on the page with class "someSelector". If one is added eventually, it'll work.

The second only applies the event handler to existing elements. If an element is added later, "click" events won't be handled.

answered Mar 29 '19 at 16:53

Pointy

405,095
59
585
614

Exactly the information I was looking for. That distinction is key in what I'm doing. Thanks! – Steven Frank Mar 29 '19 at 20:27

What is the difference between these Jquery examples?

1 Answers1