Haga clic en div, pero quieren elementos secundarios de reaccionar para hacer clic

StackOverflow https://stackoverflow.com/questions/554817

  •  23-08-2019
  •  | 
  •  

Pregunta

Mi dom se ve así:

<div class="profile">
       <a href="#"><img src="/img1.gif" /></a> <b>100</b>
       <a href="#"><img src="/img2.gif" /></a>
</div>

Ok, así que tengo muchos de estos elementos en mi página, por lo que el uso de jQuery que obligará a todos los eventos como este:

$(".profile").live('click', myCallback);


var myCallback = function(event) {
         // ??
};

Ahora, cuando alguien hace clic en el hipervínculo primero, quiero cambiar la imagen a "/img1_on.gif", a continuación, hacer una llamada AJAX a una página web y sustituir el valor entre las etiquetas con el valor devuelto.

Lo mismo happends cuando se hace clic la otra imagen, a excepción de la imagen cambia a "/img2_on.gif" y se va a otra URL.

¿Sería más fácil si Convertí la en un div y añadir un poco de css?

No hay solución correcta

Otros consejos

$(".profile a").live("click", function(e) {
  var temp = $("img", this);
  var temp2 = temp.attr("src").split('.');

  temp.attr("src", temp2[0] + "_on" + temp2[1]);

  // Ajax goes here.

  e.preventDefault();
});

Lo tenías para que el div fue el que se ha pulsado, y no los enlaces dentro de la div. Esta función debe trabajar para usted, en el supuesto de llenar en la parte ajax.

No estoy del todo seguro de lo que estás pidiendo, pero si usted quiere encontrar el elemento que causó el evento de clic, puede utilizar e.target, y luego $ (e.target) a partir de ahí. Algo como esto.

$(".profile").live('click', function(e){
  if($(e.target).is("a"))
     $(e.target).find("img").attr("src","/new/url.jpg");
});

Por ejemplo, seleccionar a los sub-links solamente ( este será el enlace):

$(".profile > a")

Para las imágenes ( este será la imagen de manipular):

$(".profile > a > img").live("click", function(event) {
    var src = $(this).attr("src");
    $(this).attr("src", src.replace(".gif", "_on.gif"));
    // ajax call in any way you prefer
    // in callback you can switch button state back
});

Usted encontrará este posterior exactamente explicando lo que el orden de eventos y lo que es Qué significa para escuchar a un evento durante la fase de captura o el burbujeo y cuando para anular la propagación adicional evento.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top