jQuery trigger trigger clic due volte

Question

Ho un modulo di verifica che utilizza php per caricare alcuni javascript & html in #Div-A quando la pagina viene caricata. Il javascript associa un evento click a #Button-A nello stesso div. Qualcosa di simile a questo:

<div id="#Div-A"><input type="button" id="Button-A"/> 
<script type="text/javascript"> 
    $('#Button-A').bind('click', function() { 
    $.ajax({ 
     type: 'get', 
     url: 'some/url/gets/called', 
     success: function() { this happens on success }  
    }); 
});</script> 
</div> 

seguito, #Global-Button è creato e una funzione JavaScript si lega un diverso evento click a questo secondo pulsante che poi innesca #Button-A di essere cliccato in questo modo:

$('#Global-Button').live('click', function(event) { 
    $("#Button-A").trigger("click"); 
}) 

Il motivo è che il contenuto di #Div-A può cambiare (tramite ajax), quindi il secondo pulsante agisce come un trigger globale indipendentemente da quale pulsante o funzione risiede in #Div-A.

Il problema che sto incontrando è che per qualche motivo se # Global-pulsante viene cliccato dopo pagina carico #Button-A viene attivato due volte . Se un evento Ajax ricarica il contenuto di # Div-A, tutto va bene e l'attivazione avviene una sola volta come dovrebbe.

Ho esaminato l'html entro #Div-A prima e dopo il ricaricamento tramite Ajax e tutto sembra identico. Non ci sono sicuramente pulsanti o funzioni duplicati da nessuna parte, per quanto posso vedere, causerebbe l'attivazione di due eventi.

So solo molto poco del DOM e posso solo supporre che questo abbia qualcosa a che fare con l'ordine in cui le cose sono caricate e gli eventi sono vincolati.

Answer 1

Si consiglia sempre di utilizzare 'unbind' prima del binding per assicurarsi che l'evento non sia associato più volte. Nel tuo caso, ci possono essere due possibilità -

1. '# Global-Button' clic funzione è legato due volte.
2. La funzione clic "# Button-A" viene associata due volte e "# Global-Button" sta effettivamente attivando il clic una volta.

modificare il codice come -

$('#Global-Button').unbind('click').bind('click', function(event) { 
    $("#Button-A").trigger("click"); 
}) 

e anche -

$('#Button-A').unbind('click').bind('click', function() { 
    $.ajax({ 
     type: 'get', 
     url: 'some/url/gets/called', 
     success: function() { this happens on success }  
    }); 
}); 

Answer 2

Non utilizzare .live. Live è deprecato l'uso .on invece

Ogni volta che si fa clic su # Blobal-Button State aspettando un click event.So è necessario utilizzare prima di esso

Usa .off per rimuovere gestore di eventi

$('#Global-Button').off('click'); 
$('#Global-Button').on('click', function(event) { 
    $("#Button-A").trigger("click"); 
}) 

Answer 3

È anche possibile utilizzare

$(".selector").on("click", function (**e**) { 
    **e**.stopImmediatePropagation();//use to stop click twice or more 
})