How to dynamically rebind JQuery Objects

Question

I am making a module for the Joomla! page of a client that uses Ajax to render different queries to the database. The result of these queries is that I regenerate the entire

Answer 1

You hinted at the right plan: use .on(). Remember though that when you're delegating a listener, you need to delegate to a listener that will not be destroyed.

Or in other words:

// will not do anything useful for this scenario:
$('.something').on('click', function() { /* ... */ });

is different from

// use the document as a listener: will work but not efficient
$(document).on('click', '.something', function() { /* ... */ });

which is different from

// use a closer ancestor that is NOT destroyed. Best option if you can
$('#someAncestor').on('click', '.something', function() { /* ... */ });