Estoy tratando de agregar un botón y hacer clic en el oyente para cada intervalo de guardado en una página. Hago:

$("#save").button().click(function(){
   currentSlide++;
   loadPage();
}

LoadPage borra mi cuadro de diálogo y carga la siguiente diapositiva en el cuadro. Si no agrego ese código a la función de carga de la página, solo se asigna el primer botón de guardar el botón y hago clic en el oyente. ¿Por qué debo asignar el oyente cada vez? ¿No debería jQuery asignar el botón y hacer clic en el oyente a todos #save?

Todas las diapositivas se almacenan en la página. La página de carga toma el contenido oculto y lo agrega al cuadro de diálogo.

2
Lumpy 21 sep. 2011 a las 00:34

8 respuestas

La mejor respuesta

¡La identificación debe ser única para todos los elementos!

Ha definido un selector de ID para que se una a la función de clic. Solo debe haber una ID para cada elemento, por lo que $('#save') solo se unirá a un elemento (el primero). Si desea enlazar a todos los tramos utilizados de esta manera, agregue una clase a cada tramo y haga referencia de esta manera, utilizando un selector de clase

$('span.mysave')
7
John Hartsock 20 sep. 2011 a las 20:54

Tengo la sensación de que está utilizando la identificación save más de una vez en la página. Como mínimo, el uso de #save como selector de jQuery solo seleccionará un elemento debido a que es una ID.

Reemplace id="save" con class="save" y use .save para seleccionarlo con jQuery: las clases se pueden usar varias veces, e incluso se pueden usar varias clases en un elemento.

1
Bojangles 20 sep. 2011 a las 20:39

A diferencia de las otras respuestas, supongo que con el botón save primero 'guardar quiere decir que está reemplazando el contenido de un antepasado del elemento con id="save" cuando loadPage().

Si este es el caso, el elemento original ‘botón de guardar 'que jQuery enlazó cuando llamó click() ha sido destruido y reemplazado por uno nuevo que jQuery no conoce. Solo están vinculados los elementos que se seleccionaron cuando creó el selector por primera vez; no se actualiza cuando cambia el conjunto de elementos que coincidirían.

Entonces, después de llamar a loadPage(), tendría que llamar a click() para volver a vincular la función (y también button() nuevamente, ya que eso cambió el elemento antiguo, por lo que sería necesario que se le indicara que actualizara el nuevo también).

Si desea vincular un evento a "cualquier elemento ahora o en el futuro que tenga una identificación save", entonces lo que desea es la delegación de eventos (delegate(), o su primo cuestionable live()):

$(document.body).delegate('#save', 'click', function(){
    currentSlide++;
    loadPage();
});

Aunque esto no le permite volver a llamar a button().

0
bobince 20 sep. 2011 a las 20:45

#save es una ID. Se supone que las identificaciones son únicas. jQuery asume esto y solo obtiene el primer elemento. En lugar de una identificación, use una clase.

Piense en el nombre, la clase y los atributos de ID de esta manera:

  • Los elementos pueden tener un nombre, pero no tienen que ser únicos. Varios elementos pueden tener el mismo nombre
  • Los elementos pueden estar en o más clases. Varios elementos pueden estar en la misma clase.
  • ID es una ID única para ese elemento.
2
Rocket Hazmat 20 sep. 2011 a las 20:40

Primero, no debe tener más de un elemento en una página que comparta el mismo atributo id .

El atributo id está reservado para ser un identificador único para un único elemento en una página.

Recomendaría agregar una clase a sus elementos en lugar de confiar en los identificadores coincidentes.

En segundo lugar, si agrega elementos dinámicamente a la página, use .live('click', ...) en lugar de .click() para poder trabajar con elementos actuales y futuros agregados a la página.

// note selecting class ".save" instead of id "#save"
$(".save").button().live('click', function(){
   currentSlide++;
   loadPage();
}
4
jondavidjohn 20 sep. 2011 a las 20:37

Guardar es una ID y, como tal, solo debe aparecer una vez en una página. $('#save') se asigna a document.getElementById('save') que devuelve un elemento.

Si está cargando contenido de carga, debe usar live o delegate.

2
topek 20 sep. 2011 a las 20:40

# significa id y id='save' es válido para un solo elemento por documento (el valor de id no se puede usar más de < fuerte> una vez ). Use class='save' en su lugar y use

$(".save").button().click(function(){

2
Muhammad Usman 20 sep. 2011 a las 20:52

Lo que otros han dicho es cierto, jQuery devolverá la primera ID. Pero, ese no es siempre el caso. Ejecute este código de prueba para ver:

<script type="text/javascript" src="/scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("div").click(function() {
            //$("#a", $("div")).remove(); // 1
            $("#a").remove();             // 2
        });
    });
</script>

<div style="border: solid 1px black;">
    <p id="a">I am the first paragraph.</p>
    <p id="a">I am the second paragraph.</p>
</div>

Cuando ejecuta la línea 2, le quita el primer #a. La línea de carrera 1 los elimina a ambos. Entonces, si no puede cambiar el marcado para usar clases, la subselección podría ser la respuesta.

0
Adrian Lynch 20 sep. 2011 a las 21:07