Load en jquery y problema de funcionamiento de otras funciones

[dani_cad]

Hola, tengo un problema al utilizar load para generar contenido html. Luego de utilizarlo deja de funcionar otras partes del codigo si ya estaban andanndo.

Genero contenido para un select dinamicamente, y luego de que se carga (correctamente) ya no responde a funciones que si lo hace iniciarlmente.

Lo explico mejor, estas son las funciones:

$("#combo_arbitros_1").change(function(evento){
var id_arbitro = $(this).val();
if (id_arbitro == 'N') {
// no oficial
$("#no_oficial_1").css("display", "block");
}else{
$("#no_oficial_1").css("display", "none");
}
});

$(".orden_arbitros").change(function(evento){
var orden = $(this).val();

$("#contenedor_arbitro_1").load(base_url+"carga/arbitro_tarjeta/procesar_contenido_combo_arbitro/combo_arbitros_1/"+orden);
});

y el html

<td colspan="2" class="l" id="contenedor_arbitro_1">
<select name="combo_arbitros_1" id="combo_arbitros_1">
<option...</option>
</td>

El evento change de combo_arbitros_1 funciona y oculta o no como indica la funcion. Ahora al "recargar" el select (que lo hace correctamente) y volver a cambiar el valor del select, ya no invoca a este evento $("#combo_arbitros_1").change...

alguna idea de por donde viene el problema? repito ambas funciones por separado andan, juntas no.

Muchas gracias por su tiempo.

[Naahuel]

Me cuesta un poco seguir tu post, tratá de envolver los códigos usando la opción "highlight" que tenés cuando posteás en el foro.

Te explico lo que está sucediendo. Primero creás un <select> con ID "combo_arbitros_1" y le asignás una función para cuando éste combo dispare el "change". Después destruís este combo y creás uno nuevo con la misma ID (por más que tenga la misma ID, no deja de ser un <select> diferente) por lo que la función que le habías asignado al <select> anterior ya no funcionará con este nuevo.

jQuery tiene para estos casos el método .delegate() que asociará la función a un evento para cualquier elemento que cumpla con el selector (por más que este sea creado después).

Probá haciendo algo así:

Código Javascript:

$("#contenedor_arbitro_1").delegate("#combo_arbitros_1","change",function(evento){
    var id_arbitro = $(this).val();
    if (id_arbitro == 'N') {
        $("#no_oficial_1").show();
    }else{
        $("#no_oficial_1").hide();
    }
});
 

Espero esté claro.

[dani_cad]

Gracias por tu respuesta Naahuel!!

Lo solucione de esa manera. Te pido disculpas por la forma de poner el codigo (desconocia la funcionalidad, lo tendre presente para la proxima).

De paso una consulta extra, ¿algun libro o documentacion que recomiendes para conocer a fondo jquey? mis conocimientos son mas que basicos y me gustaria interiorizarme.

Gracias, saludos.

[Naahuel]

De nada :)

Realmente no sé, para ser honesto yo al único lugar que recurro es a http://docs.jquery.com