Mam metodę AJAX, która porwała każdy link w HTML i {X0}}, a następnie ładuje funkcję loadPage ().

Metoda działa na wszystkich innych linkach, które nie mają wewnątrz <img>. Ale gdy <a> ma <img> wewnątrz metody clickEvent.target.href nie działa.

W tej instancji var url zwraca niezdefiniowane w konsoli, ale na innych linkach zwraca href.

Zgaduję, że coś jest nie tak, używam metody docelowej w tej instancji?

$('#container a').click(function(clickEvent){
         var url = clickEvent.target.href;
         if(url.match(urlWebServer)) {
                     clickEvent.preventDefault();
                     loadPage(url);
         }
});



<div id="user_img">        
    <a href="somepage.html"><img src="img_user/self.jpg" class="self" /></a>
</div>
1
Joakim Engstrom 16 grudzień 2011, 17:57

4 odpowiedzi

Najlepsza odpowiedź

Tak, nie należy używać clickEvent.target, ponieważ jest klikany cel. W twoim przypadku cel nie jest a, ale jest img zawiera .

Wydarzenia w fakcie Bańka, więc kliknij obraz i wydarzenie {X0}} propaguje się do góry (do a) i wyzwala dostarczony delegat zdarzeń.

Rozwiązaniem jest zmiana tej linii

var url = this.href;

Lub jeśli wolisz uzyskać wartość poprzez korzystanie z jQuery

var url = $(this).attr('href');

Pierwszy jest szybszy.

Rozwiązaniem jest to, że this w Handlera odnosi się do elementu DOM, do którego przymocujesz przewodnik do. Więc this będzie odnosić się do a.

9
Alessandro Vendruscolo 16 grudzień 2011, 14:11

Jeśli używasz jquery, aby wybrać i wiązać, dlaczego nie używać jQuery dla reszty swojej akcji?

$('#container a').click(function(event){
     var url = $(this).attr('href');
     if(url.match(urlWebServer)) {
                 event.preventDefault();
                 loadPage(url);
     }
});
3
daan 16 grudzień 2011, 14:02

To dlatego, że clickEvent.target odnosi się do elementu, który otrzymał kliknięcie, a nie element, do którego słuchacz zdarzenia został załączony. Zamiast tego użyj this, co odpowiada właściwemu elementowi.

var url = this.href;

Należy również pamiętać, że nie musisz robić $(this).prop lub $(this).attr; Możesz bezpiecznie uzyskać dostęp do właściwości {x2}} elementu kotwiącego bez konieczności tworzenia innej instancji jQuery i zadzwoń do innej metody.

2
Graham 16 grudzień 2011, 14:02

target jest rzeczywistym elementem, w którym wydarzenie zostało uruchomione, co może być dowolnym z dzieci elementu, do którego dołączasz.

Użyj this, aby odnieść się do łącza.

var url = $(this).prop("href");
1
Ilia G 16 grudzień 2011, 14:01