Evento JQuery ripetuto in contenuto dinamico

In una pagina di un sito web che sto facendo, la pressione di un button import il contenuto di un'altra pagina php e lo aggiunge alla pagina. Tuttavia, l'altra pagina contiene JQuery e l'evento di click ($ (".ExpandRoleButton")) si ripete sugli elementi precedenti each volta che importo il contenuto. Quindi, se aggiungo 3 elementi;

Elemento 1: ripete l'evento di click 3 volte

Elemento 2: ripete l'evento di scatto 2 volte

Elemento 3: Esegue l'evento di clic una volta

$("#AjouterPiece").click(function() { $.blockUI({ message: '<img src="images/ChargementGeant.gif"/><br/><h1>Un moment svp.</h1>' }); $.post("wizardincl/piste.php", {newPiste: newPiste}, function(data) { $("#wizardPistes").append(data); $.unblockUI(); $(".divNewPiste").fadeTo(300, 1); $("#nbExemplaires").attr("max", newPiste); newPiste++ $( ".ExpandRoleButton").click(function() { if ($(this).hasClass('RetractRoleButton')) { $(this).find('img').attr('src', 'images/ExpandPetitNoir.png'); var that = $(this); $(this).parent().parent().parent().parent().next().slideUp(500, function() { that.parent().parent().parent().parent().css('border-bottom', '1px solid #FF790B'); }); $(this).removeClass('RetractRoleButton'); } else { $(this).parent().parent().parent().parent().css('border-bottom', 'none'); $(this).find('img').attr('src', 'images/ExpandPetitNoirRetour.png'); $(this).parent().parent().parent().parent().next().slideDown(500); $(this).addClass('RetractRoleButton'); } }); }); }); 

Attualmente, parte del sito JQuery sembra giù e dopo qualche ricerca, non riesco a trovare qualcosa per risolvere il problema. C'è un modo per mantenere il codice da ripetersi come questo?

Ciò è dovuto al fatto che l'evento è associato a più gestori di events. La prima volta #AjouterPiece viene cliccato, tutti i pulsanti .ExpandRoleButton vengono .ExpandRoleButton a un gestore onclick.

La prossima volta che #AjouterPiece viene cliccato, viene nuovamente rilegato.

Per evitare questo, è necessario unbind i gestori di clic utilizzando il seguente codice prima di leggerlo

 $( ".ExpandRoleButton").unbind('click') 

Puoi passare nell'evento con .click(function(e) {...}) e quindi call e.stopImmediatePropagation() per spegnere solo il gestore corrente, ma che solo indirizza il sintomo, non il vero problema.

Modifica: assicuratevi di associare la nuova istanza del button solo aggiungendo un context al selettore, ad esempio $('.ExpandRoleButton', data) . Poiché si associa una class, quel selettore afferra tutti i pulsanti della pagina; il context consente di select solo quello all'interno del risultato.

Una buona pratica (solo per evitare che problemi come questo provengano, non aggiunti involontari gestori di scatti multipli aggiunti) è quello di ..

 $(".selector").off('click').on('click', function... 

o

 $(".selector").unbind('click')... $(".selector").bind('click')...