Jquery y Select

[niewpendejo]

Hola buenos dias, estoy bastante verde en jquery y mi problema es el siguiente:
Tengo una funcion en jquery que carga las comunidades , la provincias en funcion de las comunidades y los municipios en funcion de las provincias, en select.

Pero cuando traigo de la base de datos el dato de un ciudadano con su comunidad, provincia y municipio el codigo es el siguiente.

Código PHP:

   
    $html = '<li>' 
        .'<label id="title1" class="desc">Seleccionar Municipio</label>' 
         .'  <div id="ciudad" class="contenido">' 
           .'<select style="width:200px" class="comunidad" id="f1" name="data['.$this->id.'][comunidad]">' 
            .'<option>Seleccione Comunidad</option>.'; 
    
    for($i = 0 ; $i < $countComunidad; $i++){ 
          if($comunidad[$i]['id']==$data['comunidad']){ 
            $cheked='selected'; 
          $html .='<option value='. $comunidad[$i]['id'] .' selected ='. $cheked. ' >' . $comunidad[$i]['comunidad'] . '</option>'; 
       } 
       else{ 
         $html .='<option value='. $comunidad[$i]['id'] .' >' . $comunidad[$i]['comunidad'] . '</option>'; 
         $cheked='selected'; 
       } 
    } 
   
   $html .='</select>' 
      .'<select  style="width:200px" class="provincia" id="f2" name="data['.$this->id.'][provincia]">' 
                            .'<option>Seleccione Provincia</option>'; 
     for($i = 0 ; $i < $countProvincias; $i++){ 
          if($provincias[$i]['id']==$data['provincia']){ 
            $cheked='selected'; 
          $html .='<option value='. $provincias[$i]['id'] .' selected ='. $cheked. ' >' . $provincias[$i]['provincia'] . '</option>'; 
       } 
       else{ 
         $html .='<option value='. $provincias[$i]['id'] .' >' . $provincias[$i]['provincia'] . '</option>'; 
         $cheked='selected'; 
       } 
     } 
   $html .='</select>' 
           .'<select  style="width:240px" class="ciudad" id="f3" name="data['.$this->id.'][ciudad]">' 
                        .'<option>Seleccione Municipio</option>'; 
     for($i = 0 ; $i < $countMunicipio; $i++){ 
          if($municipios[$i]['id']==$data['ciudad']){ 
            $cheked='selected'; 
          $html .='<option value='. $municipios[$i]['id'] .' selected ='. $cheked. ' >' . $municipios[$i]['municipio'] . '</option>'; 
       } 
       else{ 
         $html .='<option value='. $municipios[$i]['id'] .' >' . $municipios[$i]['municipio'] . '</option>'; 
         $cheked='selected'; 
       } 
     } 
   $html .='</select>' 
             . '</div>' 
              .'</li>'; 
    return $html;  
   

Hasta aqui perfecto ,pero como hago para que cuando cambie la comunidad para hacer un cambio , me coja la provincia y los municipios correspondientes, porque si hago un cambio me deja las provincias y municipios de la base de datos...
El jquery es el siguiente.

Código:

$('#ciudad').change(function(){
     $("#ciudad").addClass('sciudad');
       $("#ciudad").removeClass('contenido');
      
  })

   if($('.sciudad').length>0){
 {
      load:'carga_comunidades'
    }, function(data){
      $('.comunidad').html(data);
    })

    $('.comunidad').change(function(){
      var current_val = $(this).val();
    

    
      $('.provincia').html('<option value="">Seleccione una Provincia</option>');
      $('.ciudad').html('<option value="">Seleccione un Municipio</option>');
     {
        load: 'carga_provincias',
        id_comunidad:current_val
      }, function(data){
        $('.provincia').html(data);
      });
    });
    //
    $('.provincia').change(function(){
      var current_val = $(this).val();
      $('.ciudad').html('<option value="">Seleccione un Municipio</option>');
      {
        load: 'carga_ciudades',
        id_provincia:current_val
      }, function(data){
        $('.ciudad').html(data);
      });
    });
  }

Un saludo y gracias

[Rosencrantz]

creo que tu problema esta más asociado a que cuando un elemento aparece en la pagina a traves de un llamado Ajax, en este caso un select, el evento asociado no es reconocido y no se aplica, a diferencia de CSS que aplica todas las propiedades a los nuevos elementos conforme vallan apareciendo javascript no hace lo mismo con los eventos sobre los nuevos elementos html.

Para solucionar el problema te sugiero investigues sobre el metodo live() de jquery y te familiarices con el plugin livequery el cual te salvara muchas veces en estos casos.

Saludos.