$(document).on(..) event works but not $("body").on(..) for dynamically generated element

Question

I have dynamically created element

<a class="update-link">

with path: body > div#MySection > table> tbody > tr > td > div > a.update-link.

When I bind event using

$(document).on("click", ".update-link", fn)

The event is triggered.

When I use $("body") or $("#MySection"), the event is not triggered. $(document) works but is inefficient due to the large scope. Why don't the more specific selectors work?

Please post a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Ele, Nov 26 '18 at 00:57
Possible duplicate of [Direct vs. Delegated - jQuery .on()](https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) — Mohammad, Nov 26 '18 at 04:10

score 0 · Answer 1 · answered Nov 26 '18 at 01:10

You can pass a context through with your event delegation:

$(() => {
  $(document, ".sec", "button").on("click", () => {
    console.log("clicked");
  });
  
  $(".sec").append("<button>Test</button>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="sec"></section>

So in your case, .sec would be body or #MySection.

$(document).on(..) event works but not $("body").on(..) for dynamically generated element

1 Answers1