jQuery cómo ejecutar el evento solo en el elemento interno

¿Hay alguna manera de dejar que el elemento interno de un listitem haga algo?jQuery cómo ejecutar el evento solo en el elemento interno

Tengo elementos de la lista que pueden contener etiquetas a con una cierta clase.

Las etiquetas internas a están asociadas a un controlador de eventos de clic en vivo. Los elementos de la lista también tienen un controlador de evento click.

Algo como esto

<li>some text<a class="someClassName">some text</a></li>

con el controlador para el a etiquetas

$('#somelist li a').live("click", function(e)

y es así como se añade el evento para el artículo li

$(markers).each(function(i,marker){ 
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){ 
      showLocation(marker, i); 
    }) 
    .appendTo("#somelist ");

Fuente

2010-02-23 Richard

Podría por favor puesto más código? ¿Qué se está agregando dinámicamente? ¿Tanto el 'a' como el' li'? ¿Solo el 'a'? ¿El clic para el 'li' usando' bind() 'y el' a' está usando 'live()'? – user113716

Los elementos li se agregan dinámicamente al principio. Se agrega una etiqueta adicional a los elementos de la lista en una etapa posterior cuando se hace clic en una casilla de verificación. Verifico con hasClass en cuál se hace clic. Supongo que tengo un enlace y un evento en vivo, entonces – Richard

bien, estás diciendo, debería usar en vivo constantemente. Definitivamente puedo probarlo, y también probar la solución de @Alex. Puedo volver más tarde para verificar si una u otra o ambas funcionaron. Gracias a los dos por la valiosa aportación de sofar. – Richard

El método live en jQuery funciona a través de la delegación de eventos, que es el acto de capturar todos los eventos burbujeantes de elementos individuales en un antecesor común (en su caso es document).

Detener la propagación/burbujeo del evento click ocurre en el elemento manejador (que es el ancestro común, no en el elemento mismo) y existe muy por encima del li que está tratando de evitar.

Entonces, cuando se llama al método stopPropagation, ya hemos recorrido el dom y pasado el elemento li.

Es esencialmente poner una señal de alto 200 pies después de la intersección.

Por lo tanto, deberá utilizar bind y stopPropagation o buscar una solución diferente.

Aquí es un ejemplo de lo que estoy hablando: http://jsbin.com/ibuxo (comprobar la consola)

se puede ver el código o editarlo en http://jsbin.com/ibuxo/edit

Mi propuesta de solución a este problema sería utilizar bind en lugar de live.

Esto requiere un trabajo un poco más, pero no es tan malo.

Probablemente esté utilizando live porque está agregando elementos nuevos y desea que tengan la misma funcionalidad. Debería hacer esto uniéndolos cuando los ingresa a la página. He aquí un ejemplo

$(function(){ 
    var myAnchorHandler = function(e){ 
    alert('clicked!'); 
    e.stopPropagation(); 
    return false; 
    }; 

    // initial bind 
    $('#somelist li a').click(myAnchorHandler); 

    // code where you input more li elements to the list with links 
    $('#somelist').append(
    // bind your function to the element now, and then append it 
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent() 
); 
});

Fuente

2010-02-23 20:11:20

buena explicación, aunque no entiendo completamente la termonología. Cualquier idea sobre soluciones diferentes tal vez, estoy fuera de las ideas en este momento. – Richard

gracias por la última actualización, lo comprobaré – Richard

Puedo entrar en más detalles si lo desea, pero más o menos, si quiere poder evitar que algo suceda en el 'li' tampoco necesita usar 'bind' para manejar sus clics, o necesita modificar cualquier manejador que esté actualmente en el' li' para ignorar cualquier cosa que se origine en un elemento de anclaje secundario. –

-1

Hacer que el controlador para las etiquetas <a> devuelven falso.

Fuente

2010-02-23 19:58:06 Pointy

Solución de Autor:

que añade todas las etiquetas a como anteriormente, por lo que no confusión con vivo más.

$(markers).each(function(i,marker){ 
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){ 
     showLocation(marker, i); 
    }) 
    .appendTo("#somelist"); 
    $("<a />") 
    .html("<strong>"+ids[i]+"</strong>") 
    .addClass('ol id') 
    .click(function(){ 
     $('#ginfo').show(); 
     return false; 
    }) 
    .appendTo(listitem);

Aquí es una página interesante para explicar evento de propagación: How to stop event bubbling with jquery live?

Fuente

2013-08-20 19:08:02

jQuery cómo ejecutar el evento solo en el elemento interno

Respuesta

Cuestiones relacionadas