Question

The scenario

I’m getting a page by JQuery ajax call, and show as a pop-up. The reason why i’m doing so is the page can be accessed without javascript also. The page itself contains some drop-down lists and buttons. In the javascript disabled version the state of the page maintained by passing the selected values to and from the server which uses php. Therefore i intended to do the same with the javascript and in such case the previous html elements need to be replaced with ajax response. I made an extensive search over the web, but helpless.

The problem

After replacing, the elements losing their event data,

how to preserve or re-bind the events associated with them?

The code i have been trying to implement is

    $('#search-main a').on('click', function(e){
        e.preventDefault();
        $('#search-advanced').remove();
        var target = $(this).attr('href');
        var res = $.get(target, function(data){
            $('body').append($(data).find('#search-advanced'));
            $('#search-advanced').addClass('row reveal-modal');
            $('#search-advanced')
            .css('top', 80)
            .css('border-radius' , '5px')
            .css('padding-left' , '0px')
            .css('padding-right' , '0px');

            $('#search-advanced input[name="select_filter"]').remove();
            $('#search-advanced .custom.dropdown').on('change', function(){
                $('#search-advanced form').trigger('submit');
            });                 

            $('#search-advanced form').on('submit', function(e){
                e.preventDefault();
                var params = $('#search-advanced form').serialize();
                $.get(target, params, function(data){
 // This is where I'm encountering the problem
 // The first time it works fine, 
 //     but for the second time the change event not get triggered
                    $('#search-advanced form').replaceWith($(data).find('#search-advanced form'));
                    $('#search-advanced input[name="select_filter"]').remove();
                    console.log($(data).find('#search-advanced .custom.dropdown'));
                });
            });

            $('#search-advanced').append('<a class="close-reveal-modal">&#215;</a>');
            $('#search-advanced').reveal({
                animation: 'fade', 
                closeOnBackgroundClick: false
            });
        });
    });

I’m not sure about the elegance of this approach, any suggestion to solve or different approach will be very thankful.

I already tried the following links

• jQuery event not triggered
• jQuery load-event after replaceWith
• Maintain jQuery onChange After a Replacewith

Answer 1

I’m not sure why you’re destroying the original form in the first place. If you just need to reset it, there are probably better ways.

But given that you are destroying the form, and therefore its handlers, you could bind the handler to the #search-advanced element, and use the event delegation signature of .on.

  // v--event is bound here          v--and will trigger on the form element
$('#search-advanced').on('submit', "form", function(e){
    e.preventDefault();
    var params = $('#search-advanced form').serialize();
    $.get(target, params, function(data){
        $('#search-advanced form').replaceWith($(data).find('#search-advanced form'));
        $('#search-advanced input[name="select_filter"]').remove();
        console.log($(data).find('#search-advanced .custom.dropdown'));
    });
});