I have a bootstrap table where I list among other things some links that trigger a jQuery action based on CSS class selector.
The past couple of days been struggling to understand why my selector does not trigger once the sorting of the table is changed (eg any type of sorting, or changing pagination etc).
Calling the action like so would only work until the table is re-sorted but not after that:
$('.class_selector').on('click', function(e) {
...
});
Calling it like so appears to work all the time:
$(document).on('click', '.class_selector', function(e){
...
});
I'm guessing the 1st approach attaches the event to the selector whereas the 2nd actually attaches it to the document and thus perform a search for the selector every time the action (ie click) is performed on the selector (ie document)? And then something happens to the document when the bootstrap table is re-sorted?
Could anyone please explain the difference between the two methods above? I've no idea how to begin searching for answers and I cannot find any reference in the documentation for the 2nd approach.
Thanks
Answer: I think I can answer this now for myself? You can delegate events either for selectors that exist at the time of parsing (1st approach), or you can bind them to selectors that might be later added dynamically (2nd approach).