How to put an event on a class that may not be in the document using jQuery selector

Question

Here is the code I'm trying to use :

$(document, ".openScript").on("click", function() {
    $("#scriptWindow").modal("show");
});

This will call the event at any click. But because the .openScript isn't present at the beginning, if I do like below once, it won't be attached to the element that will be created after this code :

$(".openScript").on("click", function() {
    $("#scriptWindow").modal("show");
});

I thought it was possible to do like the first example, is there no other way than calling the second code at any time I create an element that has the .openScript class ?

Answer 1

Reference - .on()

.on( events [, selector ] [, data ], handler )

Following is the correct delegation syntax.

$(document).on("click", ".openScript", function() {
    $("#scriptWindow").modal("show");
});