0

ダイアログをオンザフライで作成していますが、最初に開いたときに正常に機能しますが、もう一度開いてみると、作成した関数クリックが機能しません。これは私のコードです、それはすべてonready関数にあります。入力フィールドを無効にして、フォーカスを与えようとしました。どうもありがとう。

$("#rdoAddressN").click(function(){
    var html;
    html="<table>"
                +"<tr>"
                    +"<td style='font-size: 14px;'  align='center'><strong>D I R E C T O R I O</strong></td>"
                +"</tr>"
                +"<tr>"
                    +"<td align='center' nowrap>"
                    +"<input name='zipcodeType' id='zipcodeTypeCP' value='1' type='radio' style='margin: 10px'><strong>CP</strong>"
                    +"<input name='zipcodeType' id='zipcodeTypeCol' value='2' type='radio'  style='margin: 10px'><strong>Colonia</strong>"
                    +"<input name='btnBuscarCP' id='btnBuscarCP' value='Buscar' type='button'  style='margin: 10px'>"
                    +"</td>"
                +"</tr>"
                +"<tr>"
                    +"<td align='center'>"
                        +"<input autocomplete='off' name='zipcodeDialog' id='zipcodeDialog' class='zipcodeDialog' size='50' class='authInput' type='text' disabled='disabled' />"
                    +"</td>"
                +"</tr>"
                +"<tr>"
                        +"<td >"
                            +"<div style='width: 576px; opacity: 0.999999; display: none;' id='divResultsCP' align='center'>"
                            +"</div>"
                        +"</td>"
                    +"</tr>";

        +"</table>";

    var caja2 = $('<div title="Direccion de Codigos Postales"><p>'+html+'</p></div>');
    caja2.dialog({modal: true,show: 'fade',hide: 'fade',height:'auto',width:'auto'});
    $(":button").button();
    $('#zipcodeTypeCP').click(function(){
        $('.zipcodeDialog').remove("disabled");
        $('.zipcodeDialog').attr("disabled", true);
        $('.zipcodeDialog').attr("disabled", false);
        $('.zipcodeDialog').focus();
    })
    $('#zipcodeTypeCol').click(function(){
        $('.zipcodeDialog').remove("disabled");
        $('.zipcodeDialog').attr("disabled", true);
        $('.zipcodeDialog').attr("disabled", false);
        $('.zipcodeDialog').focus();
    })
    $('#btnBuscarCP').click(function(){
            if($('#zipcodeDialog').val().length>3){
            $("#divResultsCP").html('<img src="img/ajax-loader-big.gif" />')
            $.ajax({
                data: "texto="+ $('#zipcodeDialog').val()+"&zipcodeType="+$('input:radio[name=zipcodeType]:checked').val() ,
                type: "post",
                dataType: "json",
                url: "ajax/cp.php",

                success: function(data){
                        switch(data.error){
                        case undefined:
                                if(data.mensaje==undefined){
                                    $("#autocomplete_choices").html('');
                                    var tabla="<table  class='cptable'>";
                                    tabla+="<tr >"
                                        tabla+="<td ></td>";
                                        tabla+="<td>CP</td>";
                                        tabla+="<td>Colonia</td>";
                                        tabla+="<td>Municipio</td>";
                                        tabla+="<td>Ciudad</td>";
                                        tabla+="<td>Estado</td>";
                                    tabla+="</tr>"

                                    for(index=0; index<data.length; index++) {
                                        tabla+='<tr><td><a href=""> + </a></td><td>' + data[index].postal_code +  '</td><td> ' + data[index].colony_name + '</td><td>'+ data[index].d_mnpio+'</td><td>'+ data[index].city_name+'</td><td> '+data[index].state_name+'</td></tr>'
                                    }
                                    tabla+="<table>"
                                }else{
                                    tabla=data.mensaje;
                                    $("#divResultsCP").addClass("ui-state-highlight");
                                }
                                $("#divResultsCP").html(tabla)
                                $("#divResultsCP").show()
                            break;
                        case 'Login':
                                $("#autocomplete_choices").html('');
                                alert("Usuario No logueado");
                            break;
                        default:
                                $("#autocomplete_choices").html('');
                                $("#divResultsCP").html(data.error);
                                $("#divResultsCP").addClass("ui-state-highlight");
                            break;
                    }
                }
                ,error: function (request, status, error) {
                    alert(request.responseText);
                }


            });
        }
    });

})`
4

1 に答える 1

0

さて、昼休みと私は誰もあなたにまともな答えを与えていないようです。私はあなたにあなたがしようとしていることをはるかに簡単に達成する方法をあなたに示すかもしれないjsFiddleを作りました。そうでない場合は、jQueryとHTMLをより有効に活用する方法を示しているはずです。あなたがしているようにHTMLの長い文字列を作成することは、jQueryの「より多くのことをより少なく書く」という目的を完全に打ち負かすことになります。彼らはすでに大変な仕事をしました、あなたがする必要があるのは賢く働くことだけです。

ここでjsFiddleの動作を参照してください

（-呼び出す実際のphpコントローラーがないためajax urlは機能しますが、成功コードを推測しました。ローカル開発者に適用しても、同じように機能するはずです）

また、私が何を期待し、何が起こっているのかをもっと知っていれば、現実的には、私の実際の例でさえ、おそらく約12行ほど削減される可能性があります。それと私はjQueryの一部を理解するために「最も簡単」を使用しようとしましたが、htmlやその他の要素の「追加」などを実現するためのさまざまな方法があります。

于 2012-04-09T18:14:55.030 に答える