Cambio de contenido de JQuery

Estoy tratando de que JQuery cambie el contenido de las etiquetas div para que parezca que el usuario está pasando por varias páginas. La forma en que lo tengo es que el usuario presionará un botón, una vez que presione el botón, se ejecutará un script y cambiará el contenido de divs. Quería tener al menos tres páginas para hacer así, pero me encontré con un problema después de la segunda página. Esto es lo que tengo en el script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$("#1").click(function() {
$("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />');
$("#rightPart").html('');
});

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});
});

Entonces, una vez que hago clic en el botón en la primera página, con una identificación de '1', cambia la pantalla a lo que debería mostrar la segunda página. La segunda página mostrará algunas cosas y creará otro botón con la identificación de '2'. Cuando intento hacer clic en el botón de la segunda página, con una identificación de '2', no hace nada. ¿Alguna ayuda? ¿Es porque el botón se crea con el script en lugar de estar realmente en el html?

preguntado el 12 de junio de 12 a las 13:06

HTML no permite ID numéricos, debe cambiarlos, por ejemplo, a 'página1'. -

@Simon: HTML5 lo hace y la mayoría de los navegadores pueden manejarlo. Sin embargo, es feo de alguna manera;) -

Bien, mal comentario. Aquí nuevamente: la convención HTML estándar de W3C no lo permite: w3.org/TR/html4/types.html#type-name -

vea una discusión extendida sobre el uso de .click, .on, .live y .delegate con esta pregunta: stackoverflow.com/questions/10983244/unsure-about-on-method/… -

bueno, en realidad no iba a usar 1 y 2, fue simple escribirlo para poder ver si funcionó o no jajaja -

5 Respuestas

Esto se debe a que el botón con id="2" se crea después de vincular el evento de clic, este nuevo botón no se detecta a menos que vuelva a vincular el evento de clic. Una mejor opción sería usar on() en lugar de click(), esto lo hará automáticamente.

$(document).ready(function() { 

    $("#1").on('click', function() { 
        $("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
        $("#rightPart").html(''); 
    }); 

    $("#2").on('click', function() { 
        $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
    }); 

}); 

Respondido el 12 de junio de 12 a las 14:06

Este planteamiento de « $("#2").on(function() sintaxis de .on no funcionará para elementos futuros, es como .click. La sintaxis correcta es $(Static_parent).on(event,selector,callback);. - Prasenjit Kumar Nag

Funciona bien, que yo sepa, siempre lo usamos así. - Viezevingertjes

Lo siento, funcionará para este caso como #2 se está agregando antes de la llamada. Pero no funcionará para elementos agregados dinámicamente en ese caso, debe usar $(document).on('click',"#2",function() sintaxis. - Prasenjit Kumar Nag

¡OH! No vi la parte $(document).on('click', '#2', function(), eso definitivamente funciona ^^ ¡gracias! - user1399078

cambia esto

$("#2").click(function() {
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});

a

$(document).on('click',"#2",function() {
   $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});

Los valores numéricos no son identificaciones válidas, utilice una identificación válida.

Respondido el 12 de junio de 12 a las 14:06

Es porque está creando el botón dinámicamente. Necesitas usar el .on() para delegar el evento de clic. #2 el botón no se crea cuando dom está listo y es por eso que no funciona. 'cuerpo' se puede sustituir con cualquier elemento principal del botón seleccionado. Además, no debería usar números como ID, ya que no son válidos.

$('body').on('click','#2',function(){

Respondido el 12 de junio de 12 a las 14:06

Si. Esto se debe a que el botón '2' no está presente en el DOM en el momento en que el evento se adjunta a la página web.

Intenta usar

También puede referirse a ' ¿Vinculación de eventos en elementos creados dinámicamente? ' para más.

contestado el 23 de mayo de 17 a las 13:05

.live está en desuso, por lo que debe usar eso: Runa FS

Está en desuso, por lo que 'DEBE' usar eso? ¿Hay un error tipográfico allí? - Playmaker

Sí, me olvidé de que no debería (y aquí quiero decir debería) haber dicho que no debería usarlo (porque está en desuso) - Runa FS

Me estas confundiendo :P Lo tomaré como un no deber. :) - Playmaker

Solo para el lector que pueda encontrar esta publicación en el futuro: '.on' es el reemplazo de '.live', por lo que debe usarse '.on' cuando esté disponible. En algunos casos, '.on' no está disponible debido a una versión anterior de jQuery, intente actualizar siempre que sea posible, cuando esa no sea una posibilidad, simplemente continúe usando '.live' sabiendo que podría fallar en el futuro al actualizar de todos modos. - Viezevingertjes

Tienes razón, es porque se crea dinámicamente. puedes usar .on para evitar este problema

cambia tu codigo:

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});
});

a

$("#leftPart").on("click","#2",function() {
  $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input            type="text" id="glomp" value="glomp" name="glomp" >');
});

que asegurará que cualquier elemento en leftPart con el id 2 ahora y en el futuro tendrá el controlador de eventos anterior

Respondido el 12 de junio de 12 a las 14:06

@Joy ¿Qué quieres decir? no he escrito $.on en cualquier lugar - Runa FS

Me refiero a su sintaxis anterior $("#leftPart").on("#2","click",function() no era correcto. Está bien ahora que arreglaste la sintaxis. - Prasenjit Kumar Nag

@RuneFS: vea un conjunto extendido de comentarios aquí sobre .on stackoverflow.com/questions/10983244/unsure-about-on-method/… - Marcos Schultheiss

@MarkSchultheiss no está seguro de a qué apunta. leftpart existe en el momento en que se ejecuta on - Runa FS

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.