html element id not getting after load it from ajax page

Question

I am trying to load value of state field after change suburb dropdown. The suburb dropdown is coming from an ajax page after blur postcode text field. my jquery code is

$("#zip").blur(function(){
        $.post("get_suburb_admin.php",{zip:$(this).val()}, function(d){
            $("#suburb_cnt").html(d.suburb);
        },'JSON');
    });
$("#suburb").change(function(){
        $.post("get_state.php",{suburb:$(this).val()}, function(a){
            $("#state").val(a);
        });
    });

Html structure is

<tr>
                <td>Suburb :</td>
                <td id="suburb_cnt"><input type="text" name="suburb" id="suburb"  value="<?php echo $row['suburb'];?>" /></td>
            </tr>

            <tr>
                <td>Postcode :</td>
                <td><input type="text" name="zip" id="zip"  value="<?php echo $row['zip'];?>" /></td>
            </tr>

            <tr>
                <td>State :</td>
                <td id="state_cnt"><input type="text" name="state" id="state"  value="<?php echo $row['state'];?>" /></td>
            </tr>

But it is not responding after on change the suburb dropdown which is coming from ajax page. I am giving what is coming from ajax page here

$sql=mysql_query("SELECT town,region FROM au_postcode WHERE postcode='".$_REQUEST['zip']."'");
$arr=array();
$arr['suburb']='<select name="suburb" id="suburb">';
        while($row=mysql_fetch_array($sql)){
$arr['suburb'].='<option value="'.$row['town'].'">'.$row['town'].', '.$row['region'].'</option>';
        }
$arr['suburb'].='</select>';

echo json_encode($arr);

also suburb data is not getting after the form submit with method post. $_REQUEST['suburb'] = nothing, after form submit

how can I solve it, pls help

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Jan 11 '14 at 18:30

score 0 · Answer 1 · answered Jan 11 '14 at 18:32

0

try this

$("#suburb").change(function(){
    var suburbVal = $(this).val();
    $.post("get_state.php",{suburb:suburbVal}, function(a){
        $("#state").val(a);
    });
});

and same for #zip blur event

answered Jan 11 '14 at 18:32

zzlalani

22,960
16
44
73

Sorry after on change event is not firing any more – sudip-fullstack Jan 11 '14 at 18:50
sorry i didn't get it? – zzlalani Jan 13 '14 at 06:43

score 0 · Answer 2 · answered Jan 11 '14 at 18:41

DOM prepares element on every page load/refresh but when you add thing dynamically to your page (without refreshing it) it does not re initiates DOM to go and detect that. So you have to notify javascript that find your element NOW. For which you can use/bind LIVE Method (for jQuery 1.7) or ON Method (for later versions of jQuery).

Here`s a simple example for CLICK event in jQuery.

$("#myButton").click(function(){
    /*TO DO*/
});

and its another version (you can use LIVE/ON as per your jQuery`s Version)

$("#myButton").live("click", function(e){
    /*TO DO*/
});

All the Best :)

score 0 · Answer 3 · answered Jan 11 '14 at 19:42

0

I did not bind html element of suburb. You can do this by changing:

$("#suburb").change(function(){
        $.post("get_state.php",{suburb:$(this).val()}, function(a){
            $("#state").val(a);
        });
    });

to:

$("body").on("change","#suburb",(function(){
        $.post("get_state.php",{suburb:$(this).val()}, function(a){
            $("#state").val(a);
        });
    });

answered Jan 11 '14 at 19:42

Awlad Liton

9,366
2
27
53

@user1567682: did you try this? – Awlad Liton Jan 11 '14 at 19:52

html element id not getting after load it from ajax page

3 Answers3