Chrome x Jquery erro com Input Dinamica

Debugger Membro desde: 29/07/2009 11:16:45 Mensagens: 66 Offline

Pessoal,

To criando outra solução pra esse problema e logo posto aki, mas gostaria de sabe se alguem sabe o que venha a ser.

Tenho dois campos inseridos dinâmicos no html.
Só no chrome ele nao deixa eu escrever(nem clicar) no segundo campo a menos que seja precionado TAB.
Funciona perfeito no IE e no FIREFOX.

segue código.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Formulario 2 </title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="scripts/add.js"></script>
    </head>
    <body>	  
	  <form action="" method="post">
	  	<fieldset>
              <table cellspacing="0" cellpadding="0" border="0" width="705">
                <tbody>
                <tr bgcolor="#ed8000">
                  <td height="30" colspan="3"><span style="font-weight: bold;" class="font_white_02">  Participantes</span></td>
                </tr>
				<tr valign="top">
                  <td colspan="3">
                  	<div class="lang-9" id="inputs">
					</div>
				  </td>
				</tr>
				<tr valign="top">
                  <td><input id="add" value="Novo Participante" type="button"></td>
                  <td> </td>
                  <td> </td>
				</tr>
				<tr valign="top">
                  <td> </td>
                  <td> </td>
                  <td><input type="submit"  value="Confirmar e Enviar" name="Submit">
                  </td>
                </tr>
              </tbody>
			  </table>
			</fieldset>
       </form>
    </body>
</html>

jQuery(function($){
    var id = 1;
    $('#add').live('click', function(){
            $('#removeInput').remove();
			var HTML = '<div id="div-' + id + '" >\n';
			HTML += '      <label>Participante ' + id + '<label><br /><br />\n';
            HTML += '      <label>Nome Completo<label>\n';
            HTML += '      <input type="text" size="50" name="txtParticipantesNome_' + id + '" id="txtParticipantesNome_' + id + '"/><br />\n';
            HTML += '      <label>Nome Crachá<label>\n';
            HTML += '         <input type="text" size="50" name="txtParticipantesCracha_' + id + '" id="txtParticipantesCracha_' + id + '"/><br /><br />\n';
			HTML +='<input id="removeInput" type="button" value="Remove o último" />';
			HTML += '</div>\n';
            $('#inputs').append(HTML);
            id++;
    });
    $('#removeInput').live('click', function(){
        if ($("input[id^='txtParticipantesNome']").length > 1) {
            var id_last = $("input[id^='txtParticipantesNome_']:last").attr('id').replace('txtParticipantesNome_', '');
            $('#txtParticipantesNome_' + id_last + ',#div-' + id_last).remove();
        }
        else {
            var id_last = $("input[id^='txtParticipantesNome_']:last").attr('id').replace('txtParticipantesNome_', '');
            $('#txtParticipantesNome_' + id_last + ',#txtParticipantesCracha_' + id_last + ',#div-' + id_last).remove();
        }
    });
});

Debugger Membro desde: 29/07/2009 11:16:45 Mensagens: 66 Offline

Olá pessoal, como prometi segue a solução, como não sei o que foi o erro fiz outro e acho que ficou bem melhor.
Funcionando no IE, Firefox e Chrome.

Segue o Código, está bem comentado, só usar, abraços.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Formulario Div Dinamica By fidelisbsb</title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="scripts/inputdinamica.js"></script>
    </head>
    <body>	  
	  	<fieldset>
              <table cellspacing="0" cellpadding="0" border="0" width="375">
                <tbody>
                <tr bgcolor="#ed8000">
                  <td height="30" colspan="3"><span style="font-weight: bold;" >  Inputs Dinâmicas</span></td>
                </tr>
				<tr valign="top">
				  <td>
				  	Dado 1
				  </td>
                  <td colspan="2">
                  	<input type="text" id="campo1fixo" name="campo1fixo" size="50"/>
				  </td>
				</tr>
				<tr valign="top">
				  <td>
				  	Dado 2
				  </td>
                  <td colspan="2">
                  	<input type="text" id="campo2fixo" name="campo2fixo" size="50"/>
				  </td>
				</tr>
				<tr valign="top">
				  <td>
				  	 
				  </td>
                  <td colspan="2">
                  	<input id="add" value="Adicionar Dados" type="button">
					<div id="camposhidden"></div>
					<div id="campos"></div>
				  </td>
				</tr>
				<tr valign="top" id="trremover">
                  <td> </td>
                  <td colspan="2"><input id="remover" value="Remover Ultimo Valor" type="button"/></td>
				</tr>
				<tr valign="top">
                  <td> </td>
                  <td colspan="2"><input type="submit"  value="Enviar" name="Submit">
                  </td>
                </tr>
              </tbody>
			  </table>
			</fieldset>
    </body>
</html>

//contator de quantidade de dados
var id = 1;
$(document).ready(function(){
    $("#remover").hide();
    $("#add").click(function(){
        //valida campos vazios forçando preenchimento
        if ($("#campo1fixo").val() == "") {
            $("#campo1fixo").focus();
        }
        else 
            if ($("#campo2fixo").val() == "") {
                $("#campo2fixo").focus();
            }
            //caso preenchidos
            else {
                //crio campos ocultos que receberao os valores
                var HTML = "<input type='hidden' name='campo1" + id + "'  id='campo1" + id + "' value='" + $("#campo1fixo").val() + "' />";
                HTML += "<input type='hidden' name='campo2" + id + "'  id='campo2" + id + "' value='" + $("#campo2fixo").val() + "' />";
                //adiciono esses campos em uma div
                $("#camposhidden").append(HTML);
                //passo os valores pra uma div que será mostrado como uma lista
                HTML = "<div id='div" + id + "' >Dado " + id + "<br />";
                HTML += "Dado1: " + $("#campo1fixo").val() + "<br />Dado2: " + $("#campo2fixo").val() + "<br />";
                HTML += "</div>";
                //adiciono em uma lista
                $("#campos").append(HTML);
                //preparo o contador para o proximo
                id++;
                //limpo os campos para inserir um novo registro
                $("#campo1fixo").val("");
                $("#campo2fixo").val("");
                $("#remover").fadeIn(1000);
                $("#trremover").fadeIn(1000);
            }
    });
    $("#remover").click(function(){
        //decremento o contador
        id--;
        //removo o ultimo dado da lista
		$("#div" + id).fadeOut(1000).remove();
        //$("#div" + id).remove();
        //removo os campos ocultos
        $("#campo1" + id).remove();
        $("#campo2" + id).remove();
        if (id == 1) {
            $("#remover").fadeOut(1000);
			 $("#trremover").fadeOut(1000);
        }
    });
});

Notícias, artigos e o maior fórum brasileiro sobre Java