We are reviewing our project and trying to make it as standard as possible along all pages. We came across some possible approaches, below described, which seems to work the same (our software is restricted to Chrome).
Are there any differences we may have not noticed?
Option A:
$(document).on('change', "#selectAAA", function () { ... }
$(document).on('change', "#selectBBB", function () { ... }
or
Option B:
$(document).ready(function () {
$("#selectAAA").change(function () { ... }
$("#selectBBB").change(function () { ... }
}
Option A is for delegation from document. It is quite heavy if many elements
$(document).on('change', "#selectAAA", function () { ... }
$(document).on('change', "#selectBBB", function () { ... }
I prefer Option C for static elements
$(function () {
$("#selectAAA").on("change", function () { ... });
$("#selectBBB").on("change", function () { ... });
})
Or you can delegate any select - this is similar to option A
Option D
$(function () {
$(document).on('change', "select", function () {
if ($(this).is("#selectAAA")) {
}
else if ($(this).is("#selectBBB")) {
}
})
})