Use JQuery Ajax Load on a Div Loaded by another Ajax Load

Question

I have a div in my db_sample_ajax.php,

<div class="form_header" id="form_header">

</div>

using the jQuery code,

$("#form_header").load('ajax/ajax_form_header.php', {"memid":hidden_value} );

I have loaded the div class "form_header" with labels and inputs plus a div

<div class="divMunicipality" id="divMunicipality" name="divMunicipality">New Div </div>

I'm encountering a problem when I call another JQuery Ajax Load to the div class "divMunicipality" using the code below:

    $(document).ajaxComplete(function(){
        $("#txtAddress").focusout(function(){
            var barangay2 = $(this).val();  
            alert(barangay2);   
            $("#divMunicipality").load('ajax/ajax_divmunicipality.php', {"barangay1":barangay2} );
        });             
    });

The alert part of the code is working. If I replace the div class="divMunicipality" with other div class in my db_sample_ajax.php code, It's working properly.

Answer 1

Try this:

 $(document).on("focusout", "#txtAddress", function(){
        var barangay2 = $(this).val();
        alert(barangay2);
        $("#divMunicipality").load('ajax/ajax_divmunicipality.php', {"barangay1":barangay2} );
 });