Klicken Sie auf DIV, möchten jedoch, dass untergeordnete Elemente auf Klicken reagieren können

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

  •  23-08-2019
  •  | 
  •  

Frage

Mein Dom sieht so aus:

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

Ok, ich habe viele dieser Elemente auf meiner Seite. Verwenden Sie also JQuery, ich bin mit JQuery alle Ereignisse wie diesen:

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


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

Wenn jemand auf den 1. Hyperlink klickt, möchte ich das Bild in "/img1_on.gif" ändern, dann tätigen Sie einen Ajax -Anruf auf eine Webseite und ersetzen Sie den Wert zwischen dem mit dem zurückgegebenen Wert.

Das gleiche hört auf, wenn das andere Bild geklickt wird, außer dass das Bild zu "/img2_on.gif" ändert und es zu einer anderen URL geht.

Wäre es einfacher, wenn ich das konvertieren würde in ein DIV und ein paar CSS hinzufügen?

Keine korrekte Lösung

Andere Tipps

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

Sie hatten es so, dass der Div derjenige war, der geklickt wurde, und nicht die Links im Div. Diese Funktion sollte für Sie funktionieren, vorausgesetzt, Sie füllen den AJAX -Teil aus.

Ich bin mir nicht ganz sicher, was Sie fragen, aber wenn Sie das Element finden möchten, das das Click -Ereignis verursacht hat, können Sie E.Target und dann $ (e.target) von dort verwenden. Etwas wie das.

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

Wählen Sie beispielsweise nur Unterlinks aus (Dies wird der Link sein):

$(".profile > a")

Für Bilder (Dies wird das Bild sein, das manipulieren muss):

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

Sie werden das finden Post Genau erklärt, was die Ereignisreihenfolge ist und was es bedeutet, ein Ereignis während der Erfassungs- oder Sprudelphase zu hören und wann weitere Ereignisausbrüche abgesagt werden müssen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top