Cancella ascoltatori JQuery prima del caricamento Ajax di dati simili

Question

Cancella ascoltatori JQuery prima del caricamento Ajax di dati simili

#1 da (0 voti)

2

Ho una struttura ad albero sul lato sinistro della pagina da cui l'utente può eseguire il drill-down e selezionare gli elementi. Ogni ramo ha oggetti simili. Quando si fa clic su un nodo foglia, faccio una chiamata JQuery .load (...) che carica i dati della foglia in un div sul lato destro della pagina.

L'utente può visualizzare e / o apportare modifiche ai dati visualizzati. Se l'utente seleziona una foglia di pari livello, utilizzo .empty () per cancellare il div laterale destro, viene effettuata una nuova chiamata .load () e vengono caricati i nuovi dati.

Il mio problema è che il codice .on ('click' .... del codice precedente è ancora attivo.) Il codice fratello di .on ('click' .... codice viene ignorato.Se clicco sulla foglia originale di nuovo (è ricaricato via .load) il .on ('click' .... chiama work.

C'è un modo per cancellare i precedenti ascoltatori di "click" di JQuery o dovrò trovare un modo per impostare un ID univoco per i dati di ciascuna foglia?

Modifica:

Codice di esempio:

<div id=right_side>
    <input type="text" id="firstname">Susan</input>
    <label for="nickname">Nickname? <input type="checkbox" id="nickname"></label>
</div>
<script>window.jQuery('#nickname').on('change',function(x){console.log("changed");})</script>

Il codice precedente viene caricato nel div laterale destro ogni volta che si fa clic su un nodo foglia nell'albero. La casella di controllo "nickname" smette di funzionare sui carichi successivi per gli altri nodi foglia. C'è una casella di controllo con un id di "nickname" in tutte le foglie. Ho pensato che se avessi svuotato il div del lato destro, gli ascoltatori associati sarebbero stati resi muti (per così dire) ma gli ascoltatori iniziali rimangono attivi anche dopo la chiamata .empty ().

html5 javascript jquery

posta bh3333 25.06.2015 - 16:21

fonte

1 risposta

Leggi altre domande sui tag html5 javascript jquery

Memorizzare le informazioni sulle eccezioni come variabile membro per una query successiva, cattiva pratica? [duplicare] Account globali nel sistema di autorizzazione multi-tenant

score 0 · Accepted Answer

Non associare eventi a elementi che possono apparire, scomparire o cambiare. Legateli sul DIV principale:

<div id="right_side">
    <input type="text" id="firstname">Susan</input>
    <label for="nickname">Nickname? <input type="checkbox" id="nickname"> </label>
</div>
<script>
    // This script must be executed only once (i.e. must not be in the loaded code).
    // Actually it would be better if it were executed from the jQuery
    // onload bootstrap call.
    // It listens on any change event on any INPUT tag inside #right_side
    // whether it has been already loaded or not.

    $('#right_side').on('change', 'input', function(x) {

        // We do not know WHICH control got changed.
        var id = $(this).attr("id");

        // We also would need some data from the left side, probably.
        // e.g. on the left side we have an A tag with data-right="foo"
        // and an onclick() that clears the .clicked class from all
        // tree's As, then adds the .clicked class to that A only.
        // This way $('#tree a.clicked').attr("data-right") will tell us
        // which A determined the loading of the right-hand panel.

        console.log("input with id " + id + " has changed");

    });
</script