ajax - jQuery form not working when part of ajaxed content

Question

I'm setting up a faceted search where form data is serialized and used to determine the content to pull in using load(). I have two main sections, the sidebar (.sidebar) and the results area (.results), all wrapped in a wrapper (.wrap) div.

var mainContent = .results

$('#facets').change(function(e){
    mainContent.load('?' + formData + ' .results');
    e.preventDefault();
});

When I do execute it this way, the form continues to function as intended (loads results asynchronously on change().)

...but it's important that the form also be loaded as well, since the facets are dynamically populated by the search results.

When I change the mainContent variable to the whole wrapper div...

var mainContent = .wrap

$('#facets').change(function(e){
    mainContent.load('?' + formData + ' .wrap');
    e.preventDefault();
});

..the form submits on change the first time, but stops reacticting after it's pulled in to the DOM via ajax.

What am I missing?

Answer 1

Use delegated event, as the element is loaded via ajax after DOM load:

$(document).on('change','#facets',function(e){
    mainContent.load('?' + formData + ' .wrap');
    e.preventDefault();
});