$（document）.on（..）事件有效，但动态生成的元素的$（“ body”）。on（..）事件无效

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?

Answer 1

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 .