JS Pattern for Organizing Selectors and Function Reuse After Load

application.js

// Your main application js. We will include jQuery first, then everything else
//= require jquery
//
//= require_tree .

// You can choose to DRY common selectors perhaps used system wide.
const SELECTORS = {
	RESULTS: () => $("#results-box")
}

//GLOBAL functions on DOM
document.addEventListener("turbolinks:load", function() {

    //You can do this here if you find it more explicit, or in the utility to keep it tidy.
    // $(document).find(MODAL_SELECTORS.MODAL_FORM).initModals();

});

modals.js

// example of a utility with mthods to be applied both at page load, and dynamically later

// You should DRY your selectors into a struct at the top of your files for easy reference
const MODAL_SELECTORS = {
	MODAL_FORM: () => $(".fancy-modal-form"),
	MODAL_SUBMIT: () => MODAL_SELECTORS.MODAL_FORM().find("#submitForm"), //<- you can nest them for re-use
	MODAL_CANCEL: () => MODAL_SELECTORS.MODAL_FORM().find("#cancelForm"), //<- you can nest them for re-use
}

// init all the modals for this selector. This can be called on a partial loaded by AJAX to init any modals therin
$.fn.initModals = function(){
	// initialize the submit button for this "modal"
	$(this).find(MODAL_SELECTORS.MODAL_SUBMIT()).on("click", (e) => {
		e.preventDefault()
		var self = $(this);

		self.prop('disabled', true) //no more submits

		loadDynamicContent().then(response => {
			self.prop('disabled', false) //submits ok

			//imagine the response contains a snipped to be aded to the dom.
			//We can initialize it's new contents using this method.
			//This will be faster than calling initModals on the whole tree.
			SELECTORS.RESULTS.append(response.data).initModals();
		})
	})
};

$.fn.loadDynamicContent = function() => {
	state.loading = true; // do whatever you like with this
	return $.ajax({
		url: $(this).data('target-url'), //<- this could be stored on the dynamic modal itself
		method: "POST",
		data: buildData(), //<- get your data somehow
		dataType: "json",
		success: () => {
			state.loading = false;
		}
	})
}


// The things we want to do specific to modals, but after the dom is loaded
document.addEventListener("turbolinks:load", function() {

    //find our dynamic content, and initialize the modals ONLY within that selector.
    MODAL_SELECTORS.MODAL_FORM.initModals();

}

NOTE: I totally free-styled this right into the Gist editor. It is not tested code.
The point here is just to convey the concepts of:

• DRY selector lookups
• Extending the jQuery selector namespace with $.fn.myFunc
• Using your selector-targeted functions both at page load and at runtime