In JQuery 3.5 I've been struggling with understanding the submit button syntax. Can someone please clarify when to use this Ex.A:

        $(document).on("submit", "#new_device", function(e) {...

And this, Ex.B:

        $("#device_box_form_" i).on("submit", function(e) {...

(Note, the 'i' here is a variable in a for loop generating an integer.) Ex.B's syntax works for my dynamically generated forms but for some reason doesn't work for Ex. A. I just don't understand why one syntax works for a form but not for others? I'm missing something in my understanding of the syntax.

CodePudding user response：

$(document).on("submit", "#new_device", function(e) {...

This will binds a click event to the document and all child elements within it. Means dynamically created elements will be having the event by default.

$("#device_box_form_" i).on("submit", function(e) {...

Binds the click event to the event directly on the element once we loaded page.