Clique em Div, mas quero que os elementos da criança reagam para clicar
Pergunta
Meu DOM se parece com o seguinte:
<div class="profile">
<a href="#"><img src="/img1.gif" /></a> <b>100</b>
<a href="#"><img src="/img2.gif" /></a>
</div>
Ok, então eu tenho muitos desses elementos na minha página, então, usando o jQuery, vincula todos os eventos como este:
$(".profile").live('click', myCallback);
var myCallback = function(event) {
// ??
};
Agora, quando alguém clica no 1º hiperlink, quero alterar a imagem para "/img1_on.gif", depois faça uma chamada de Ajax para uma página da web e substitua o valor entre o com o valor retornado.
O mesmo acontece quando a outra imagem é clicada, exceto que a imagem muda para "/img2_on.gif" e vai para outro URL.
Seria mais fácil se eu converter o em uma div e adicionar alguns CSs?
Nenhuma solução correta
Outras dicas
$(".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();
});
Você o tinha para que a div fosse clicada, e não os links dentro da div. Essa função deve funcionar para você, supondo que você preencha a parte do Ajax.
Não tenho muita certeza do que você está perguntando, mas se você deseja encontrar o elemento que causou o evento de clique, pode usar o e.Target e, em seguida, $ (e.Target) a partir daí. Algo assim.
$(".profile").live('click', function(e){
if($(e.target).is("a"))
$(e.target).find("img").attr("src","/new/url.jpg");
});
Por exemplo, selecione apenas sub-links (isto será o link):
$(".profile > a")
Para imagens (isto será a imagem para 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
});
Você encontrará isso publicar Explicando exatamente qual é a ordem do evento e o que significa ouvir um evento durante a fase de captura ou borbulha e quando cancelar a propagação de eventos adicionais.