asignar jQuery onclick para li desde un enlace

tengo una lista de elementosasignar jQuery onclick para li desde un enlace

<ul class="list"> 
    <li> 
     <a href="#Course1" class="launch" onclick="alert('event 1')">event 1</a> 
    </li> 
    <li class="alt"> 
     <a href="#Course2" class="launch" onclick="alert('event 2')">event 2</a> 
    </li> 
    <li> 
     <a href="#Course3" class="launch" onclick="alert('event 3')">event 3</a> 
    </li> 
    <li class="alt"> 
     <a href="#Course4" class="launch" onclick="alert('event 4')">event 4</a> 
    </li> 
</ul>

Quiero ser capaz de asignar el onclick del enlace a la onclick del li aswell

Mi intento hasta ahora es un clic detrás (como yo estoy asignando el guión a la onclick en lugar de ejecutar la secuencia de comandos)

$('.list li').click(function() { 
    var launch = $('a.launch', this); 
    if (launch.size() > 0) { this.onclick = launch.attr('onclick'); } 
});

Gracias de antemano Tim

Fuente

2009-05-26 Tim Jarvis

edificio en @Thomas Stock's answer el siguiente código impide doble ejecución al hacer clic en el enlace en lugar de li. (Consiguió de here sitio de jQuery)

$(document).ready(function() { 

    $('ul.list li').click(function(e) { 
     var $target = $(e.target); 
     if(!$target.is("li")) //magic happens here!! 
     { 
      return; 
     } 

     var launch = $('a.launch', this); 
     if (launch.size() > 0) 
     { 
      eval(launch[0].onclick()); 
     } 
    }); 
});

Fuente

2009-05-27 04:06:16 TheVillageIdiot

ahhhh la magia - gracias –

aro sobre el li utilizando cada vez de usar clic:

$(document).ready(function(){ 
    $('.list li').each(function() { 
     var launch = $('a.launch', this); 
     if (launch.size() > 0) { this.onclick = launch.attr('onclick'); } 
    }); 
});

Fuente

2009-05-26 14:04:06

$('.list li').click(function() { 
    var launch = $('a.launch', this); 
    if (launch.size() > 0) { eval(launch.attr('onclick')) } 
});

solución de Mario también funcionará. El mío tomará el evento onclick del niño y lo ejecutará, con el clic real.

La solución de Mario vinculará el evento onclick con el li en la carga del documento. Elija lo que más le convenga.

Fuente

2009-05-26 14:06:15

Hola Thomas Me gusta bastante esta implementación, ya que encaja con algunas otras cosas que estoy haciendo. Pero, cuando hago clic en el enlace original, el javascript ahora se dispara dos veces, ¿hay alguna forma de evitar esto usando tu método? –

Hmmm, buena pregunta. Sé que es posible porque hice algo similar antes. Espera, revisaré la documentación de jquery –

¿tienes alguna idea de qué hacer clic primero? (agregue una alerta() en la li.click para averiguarlo) –

Su mejor opción es, probablemente, elegir un tipo de elemento específico, tal vez el que tiene mayores dimensiones, y asignar el manejador de clic solo a esos. Si el onclick está configurado tanto para la etiqueta A como para la LI (a través de cualquier medio), la llamada puede suceder dos veces, a menos que específicamente evites dicho evento burbujeante en tu función nombrada.

¿Hay alguna razón en particular por la que desee que ocurra la misma acción en ambos tipos de elementos, en lugar de solo uno? (Si se trata de algo en la línea de "sólo por precaución", que es probablemente la mejor manera de resolver los problemas en lugar de pavimentación sobre ellos con más secuencias de comandos.)

Fuente

2009-05-27 03:17:47

haces esto por lo que todo el bloque li es un enlace activo en lugar de sólo el elemento? Si es así, podría hacer esto fácilmente con CSS en su lugar.

HTML:

<html> 
<head> 
    <title>Testing Block Elements</title> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 

<body> 
    <ul id="menu"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
     <li><a href="#">Link 5</a></li> 
    </ul> 
</body> 
</html>

CSS:

#menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#menu li { 
    /* Added to show the whole li element will be a clickable link. */ 
    width: 250px; 
    border: 1px solid #000000; 
} 

#menu li a { 
    display: block; 
}

EDIT:

Y al hacer esto, sólo es necesario adjuntar el evento click a la etiqueta si realmente necesita hacer algo de javascript cuando el usuario haga clic en él.

Fuente

2009-05-27 04:19:34 Gromer

Mejor respuesta imho. Póster inicial quiere ser capaz de hacer clic en el LI. No es necesario javascript aquí, mostrar: el bloque hace la magia. –

asignar jQuery onclick para li desde un enlace

Respuesta

Cuestiones relacionadas