.change() nao funciona depois que carrega ajax

[FILR@N 0]

Olá pessoal. Estou com um pequeno problema...

 

Numa página, quando clico neste botão

<div onclick="criar_unidade()">Adicionar uma Nova Unidade</div>

nesta mesma página, renderizo e incluo um arquivo .html via ajax nesta página, olhem abaixo:

<script type="text/javascript">
	$(document).ready(function(){
		 $( "#coi_tipo_unidade" )
		 	.change(function () {
		 		var coi_tipo_unidade = "";
		 		$( "select option:selected" ).each(function() {
		 		  coi_tipo_unidade += $( this ).val() + " ";
		 		});
				
		 		if(coi_tipo_unidade > 0)
		 		{
		 			//carrega nova pagina abaixo
		 			form_criar_unidade(coi_tipo_unidade); 
		 		}
		 }).change();	
	});	
</script>

<select id="coi_tipo_unidade" name="coi_tipo_unidade" class="tipo_unidade easyui-combobox" style="width:400px;">
	<option value="a">Selecione um programa</option>
	<option value="b">Administração Central</option>
	<option value="c">Campus</option>
	...
</select>

Quando escolher alguma unidade (Adm, campus..) abaixo aparecerá um formulário, que também é um arquivo .html que chamo via ajax:

<form>
...
<select id="Parent" name="cos_unidade_mae" class="easyui-combobox" style="width:400px;">
	<option value="">Selecione uma opção</option>
	<option value="450">INSTITUTO...</option>
	...	
</select>
...
</form>

O formulário acima possui vários campos. Quando digito algo num type="text" e seleciono outra unidade, esse formulário é carregado novamente, por causa do .change(). No entanto, quando excepcionalmente clico em algum <select>, como por exemplo, este acima, a ação do .change() sob o <select id="coi_tipo_unidade" ...> deixa de funcionar. O que pode ser?

[William Bruno 1501]

não traga tags script via ajax, deixe o script já na página pre carregada.

 

e use event delegate.

[marcello.alvess 0]

pode colocar ajaxComplete no lugar de ready.

[FILR@N 0]

Pessoal, obrigado pelas dicas, mas...

 

marcello.alvess, troquei para ajaxComplete e parace fica um loop enterno e trava o navegador. Ob pela dica.

 

Willian, passei pra página já carregada e mudei para delegate. Mas ainda acontece o mesmo problema. Quando clico em um <select> diferente, ele para de funionar.

$( "body" ).delegate( "#coi_tipo_unidade", "click", function() {
	$( this )
		.change(function () {
			var coi_tipo_unidade = "";
			$( "select option:selected" ).each(function() {
			  coi_tipo_unidade += $( this ).val() + " ";
			});
			
			if(coi_tipo_unidade > 0)
			{
				form_criar_unidade(coi_tipo_unidade);
			}
	}).change();
});

[marcello.alvess 0]

usa assim

 

$( "body" ).on( "click", "#coi_tipo_unidade", function(){

 

}

[William Bruno 1501]

em vez de:

$( "body" ).delegate( "#coi_tipo_unidade", "click", function() {
	$( this )
		.change(function () {

use:

$( "body" ).on( "change", "#coi_tipo_unidade"", function() {

[FILR@N 0]

Funcionou com $( "body" ).on( "change", "#coi_tipo_unidade"", function() {

 

Obrigado, pessoal!