L’evento Click sul pulsante sta inviando un’icona come destinazione?

Sto riscontrando un problema molto simile a: “Jquery”, fare clic su “non viene triggersto quando l’icona è sul pulsante”, tuttavia la risoluzione per quel post non fornisce una soluzione per me, quindi penso che potrebbe accadere qualcosa di diverso.

Il problema essenziale è che ho un pulsante con un’icona al suo interno. Quando clicco sul pulsante (ad es. Il testo) il target dell’evento è l’elemento button; tuttavia quando faccio clic sull’icona, il target dell’evento è l’object icona. Questo purtroppo è estremamente fastidioso perché sto memorizzando i valori dei dati sul mio pulsante a cui vorrei accedere.

Ecco l’HTML:

  

Ed ecco il Javascript:

 function sendVote(event) { var $btn = $(event.target); console.log(parseInt($btn.data('vote')); console.log($btn.prop('tagName')); } $('body').on('click', 'button.vote-button', sendVote); 

Facendo clic sul testo (“Up Vote!” O “Down Vote!”) Si ottiene il seguente output della console:

 1 BUTTON -1 BUTTON 

Facendo clic sull’icona (, ecc.) Si ottiene il seguente output della console:

 NaN I NaN I 

Anche se ho registrato l’handle sugli elementi con il selettore “button.vote-button”. Qualcuno sa perché questo sta accadendo? Odio dover attribuire attributi di dati alle icone.

È causato dalla propagazione dell’evento. Fai clic sull’icona, che si trova all’interno del pulsante, in modo che l’evento click si propaga attraverso il DOM dall’icona, al pulsante, fino al documento. Ciò comporta l’esecuzione del codice del gestore eventi click .

Se il problema è che desideri semplicemente il riferimento al pulsante ogni volta che il codice viene eseguito, ma vuoi comunque che si attivi quando fai clic sull’icona anziché sul testo, devi solo utilizzare this anziché event.target :

 var $btn = $(this); ... 

jQuery farà in modo che this si riferisca sempre al pulsante, anche se l’elemento event.target effettivo è un elemento al suo interno.

Usa event.currentTarget che è sempre l’object che ascolta l’evento; event.target è il target effettivo che ha ricevuto l’evento che non è quello che vuoi in questo caso poiché potrebbe essere l’icona.

Con event.currentTarget se l’utente fa clic sull’icona, esso bolla l’evento fino al listener dell’object che è il pulsante nel tuo caso. Se l’utente fa clic sul pulsante, funzionerà comunque perché di nuovo il listener dell’object è il tuo pulsante.

aggiorna questo perché $(event.target) non è sempre button per questo devi usare l’operatore ternario come suggerito o sostituire $(event.target) con $(this) che è sempre button nel contesto del selettore:

 function sendVote(event) { event.stopPropagation(); var $btn = $(event.target).is('button') ? $(event.target) : $(event.target).parent(); console.log(parseInt($btn.data('vote'))); console.log($btn.prop('tagName')); } $(function () { $('body').on('click','button.vote-button', sendVote); }); 

Demo fiddle


o con $(this) che è sempre button perché l’evento è associato ad esso e se si fa clic su qualsiasi figlio di esso allora l’ event salterà in bolla alla struttura dom e l’evento associato al pulsante verrà eseguito:

 function sendVote(event) { var $btn = $(this); // <-----------------change just here console.log(parseInt($btn.data('vote'))); console.log($btn.prop('tagName')); } 

Che ne dici di controllare all’interno della funzione se il tagname è I, e se lo è, ottenere il genitore come $ btn. http://jsfiddle.net/jFIT/qZgYU/3/

 $('body').on('click', 'button.vote-button', function() { var $btn = $(this).prop('tagName').toLowerCase() == "i" ? $(this).parent() : $(this); console.log(parseInt($btn.data('vote'))); console.log($btn.prop('tagName')); });