html element id not getting after load it from ajax page - php

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

Answer 1

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

Answer 2

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 :)

Answer 3

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);
});
});