Cliquez sur div, mais veulent des éléments enfants à réagir à cliquer

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

  •  23-08-2019
  •  | 
  •  

Question

Mon dom ressemble à ceci:

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

Ok donc j'ai beaucoup de ces éléments sur ma page, donc en utilisant jQuery je lie tous les événements comme celui-ci:

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


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

Maintenant, quand quelqu'un clique sur le lien hypertexte 1er, je veux changer l'image « /img1_on.gif », puis faire un appel ajax à une page Web et remplacez la valeur entre les balises avec le valeur renvoyée.

La même chose happends quand l'autre image est cliqué, à l'exception des changements d'image à « /img2_on.gif » et il va vers une autre URL.

Serait-il plus facile si je converti le dans un div et ajouter un peu css?

Pas de solution correcte

Autres conseils

$(".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();
});

Vous aviez alors que la div était celui d'être cliqué, et non les liens à l'intérieur de la div. Cette fonction devrait travailler pour vous, en supposant que vous remplissez la partie ajax.

Je ne suis pas tout à fait sûr de ce que vous demandez, mais si vous voulez trouver l'élément qui a provoqué l'événement de clic, vous pouvez utiliser e.target, puis $ (e.target) à partir de là. Quelque chose comme ça.

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

Par exemple, sélectionner des sous-liens uniquement ( ce sera le lien):

$(".profile > a")

Pour les images ( ce sera l'image à manipuler):

$(".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
});

Vous trouverez cette après expliquant exactement ce que l'ordre des événements et ce signifie écouter un événement pendant la phase de capture ou barbotage et quand annuler propagation supplémentaire d'événements.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top