Javascript Bind su Blur, Entrambi 'se indexOf' e 'altro' Eseguita

StackOverflow https://stackoverflow.com/questions/4027034

Domanda

HTML 

<!-- Contents of div #1 -->
<form id="6hgj3y537y2biacb">
    <label for="product_calendar" class="entry_label">Calendar</label>
    <input type="text" name="product_calendar" class="entry" value="" />
</form>
<form id="pyc2w1fs47mbojez">
    <label for="product_calendar" class="entry_label">Calendar</label>
    <input type="text" name="product_calendar" class="entry" value="" />
</form>
<form id="kcmyeng53wvv29pa">
    <label for="product_calendar" class="entry_label">Calendar</label>
    <input type="text" name="product_calendar" class="entry" value="" />
</form>

<!-- Contents of div #2 -->
<div id="calendar_addRemove"> <!-- CSS >> display: none; -->
    <div id="calendar_add">
        <label for="calendar_add" class="calendar_addLabel">Add Occurrence</label>
        <input type="text" name="calendar_add" class="calendar_addInput" value=""/>
    </div>
    <div id="calendar_remove">
        <label for="calendar_remove" class="calendar_removeLabel">Remove Occurrence</label>
        <input type="text" name="calendar_remove" class="calendar_removeInput" value=""/>
    </div>
</div>

JavaScript 

// Complete behavioral script
$(function() {
    $('input[name=product_calendar]').css({ 'color': '#5fd27d', 'cursor': 'pointer' }).attr({ 'readonly': 'readonly' }); // Additional formatting for specified fields
    $('input[name=product_calendar]').focus(function() { // Focus on any 'input[name=product_calendar]' executes function
        var product_calendar = $(this); // Explicit declaration
        var attr_val = $(product_calendar).attr('value');
        $('#calendar_addRemove input').attr({ 'value': '' }); // Clear input fields
        $('#calendar_addRemove').fadeIn(500, function() { // Display input fields
            $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur
                alert('Blur'); // Added for testing
                var add_val = $('input[name=calendar_add]').attr('value');
                if (add_val != '') {
                    alert('Not Blank'); // Added for testing
                    var newAdd_val = attr_val + ' ' + add_val;
                    $(product_calendar).attr({ 'value': newAdd_val });
                    $('#calendar_addRemove').fadeOut(500);
                    }
                else {
                    alert('Blank'); // Added for testing
                    $('#calendar_addRemove').fadeOut(500);
                    }
                });
            $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur
                alert('Blur'); // Added for testing
                var remove_val = $(this).attr('value');
                if (remove_val != '') {
                    alert('Not Blank'); // Added for testing
                    if (attr_val.indexOf(remove_val) != -1) {
                        alert('Eval True'); // Added for testing
                        var newRemove_val = attr_val.replace(remove_val, '');
                        $(product_calendar).attr({ 'value': newRemove_val });
                        $('#calendar_addRemove').fadeOut(500);
                        }
                    else {
                        alert('Eval False'); // Added for testing
                        $('#calendar_remove').append('<p class="error">Occurrence Not Found</p>');
                        $('.error').fadeOut(1500, function() { $(this).remove(); });
                        }
                    }
                else {
                    alert('Blank'); // Added for testing
                    $('#calendar_addRemove').fadeOut(500);
                    }
                });
            });
        });
    });

Ho aggiunto un paio di avvisi per visualizzare l'ordine questo script sta eseguendo in. Quando entro in 1234 input[name=calendar_add] e sfocatura, gli avvisi vengono su come previsto. Poi, quando procedo ed entro 1234 in input[name=calendar_remove] e sfocatura, questo script getta le segnalazioni nel seguente ordine: Blur, non vuoto, Eval False, Blur, non vuoto, Eval Vero - Se ripeto questo processo, il verificarsi di miei avvisi raddoppiare ogni volta (sia aggiungere e rimuovere), ma mantenendo lo stesso ordine (come se in set).

Credo che il problema è più valore di ri-dichiarazione della attr_val variabile nel DOM, ma non sono del tutto sicuro di come rivedere il mio script per alleviare questo problema.

È stato utile?

Soluzione

Non è così. Questo non è possibile.

Quindi, ci sono alcune possibili ragioni che potrebbe sembrare così:

  • Il codice che viene eseguito in realtà non sembra così. Potrebbe essere una versione più vecchia che viene memorizzato nella cache, o si sta cercando nel file sbagliato.

  • Le piste di codice più di una volta, in questo modo entrambi i rami di esecuzione possono eseguire. (Anche se non posso davvero vedere alcuna possibilità di quello qui.)

  • Si sta interpretando male il risultato, e tutto ciò che si vede che porta alla conclusione che entrambi i rami devono essere eseguiti, è infatti causato da qualche altro codice.

È possibile utilizzare un debugger per impostare punti di interruzione nel codice. Impostare uno punto di interruzione prima che la condizione, e uno in ogni ramo. Poi si vedrà se il codice viene eseguito due volte, una volta o per niente.

Modifica:

Gli avvisi che sono stati aggiunti agli spettacoli di codice che l'evento è in realtà chiamato due volte, e la prima volta i valori non sono ciò che si pensa che lo siano.

Aggiungete un po 'di codice per cercare di scoprire dove l'evento viene richiamato da. Prendere l'oggetto evento aggiungendolo alla firma della funzione: .blur(function(e) {. Quindi è possibile utilizzare e.currentTarget per ottenere l'elemento che ha generato l'evento, e visualizzare alcuni attributi da esso (come se fosse id) per identificarlo.

Modifica 2:

Sono curioso su questa linea: 

$(product_calendar).attr({ value: newRemove_val });

si fa a creare il posto variabile product_calendar, o volevi dire: 

$('input[name=product_calendar}').attr({ value: newRemove_val });

Modifica 3:

Vedendo il codice completo, la causa della doppia esecuzione è chiaro. Si sta aggiungendo i gestori anche all'interno di un gestore di eventi, il che significa che un altro gestore si aggiunge ogni volta.

La ragione di attr_val non funziona correttamente è perché è creato come una variabile locale in una funzione, e poi unsed in un'altra funzione.

Aggiungere i gestori di sfocatura dall'inizio, invece, e si verificano solo una volta. Dichiarare la variabile di fuori della funzione.

Alcune note:

  • È possibile utilizzare la funzione val invece di accedere l'attributo value utilizzando la funzione di attr.
  • Quando si $(this) assegnare a product_calendar, si tratta di un oggetto jQuery. Non è necessario usare $(product_calendar).
  • La rimozione non corrisponde a valori completi, in modo da poter aggiungere 12 e 2, quindi rimuovere 2 e si ottiene 1 e 2 sinistra.

(questo è un testo fittizio, perché non si può avere un blocco di codice a seguito di una lista ...) 

// Complete behavioral script
$(function() {

  // declare variables in outer scope
  var attr_val;
  var product_calendar;

  $('input[name=product_calendar]')
    .css({ 'color': '#5fd27d', 'cursor': 'pointer' })
    .attr('readonly', 'readonly') // Additional formatting for specified fields
    .focus(function() { // Focus on any 'input[name=product_calendar]' executes function
      product_calendar = $(this); // Explicit declaration
      attr_val = product_calendar.val();
      $('#calendar_addRemove input').val(''); // Clear input fields
      $('#calendar_addRemove').fadeIn(500); // Display input fields
    });

  $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur
    var add_val = $(this).val();
    if (add_val != '') {
      product_calendar.val(attr_val + ' ' + add_val);
    }
    $('#calendar_addRemove').fadeOut(500);
  });

  $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur
    var remove_val = $(this).val();
    if (remove_val != '') {
      if (attr_val.indexOf(remove_val) != -1) {
        product_calendar.val(attr_val.replace(remove_val, ''));
        $('#calendar_addRemove').fadeOut(500);
      } else {
        $('#calendar_remove').append('<p class="error">Occurrence Not Found</p>');
        $('.error').fadeOut(1500, function() { $(this).remove(); });
      }
    } else {
      $('#calendar_addRemove').fadeOut(500);
    }
  });

});

Altri suggerimenti

OK, credo di aver capito il problema ora.

Ogni volta che fate un focus sugli elementi product_calendar, si fa un fadeIn sull'elemento #calendar_addRemove. Ogni volta che fate che fadeIn, è possibile utilizzare le sue callback per legare nuovi i gestori di sfocatura agli elementi calendar_add e calendar_remove. Ciò significa che nel corso del tempo, questi elementi dovranno più i gestori di sfocatura (tutto l'esecuzione della stessa logica.) Che non può essere ciò che si desidera.

Nello script di seguito, ho tirato fuori i gestori annidati in modo che siano tenuti solo una volta per ogni elemento. Si noti che:

  • product_calendar è dichiarato (come null) nella parte superiore della funzione anonima, e poi aggiornato dal gestore attenzione sull'elemento product_calendar. I che Questo si traduce in un comportamento corretto.

  • attr_val viene dichiarato e assegnato a livello locale in entrambi i gestori di sfocatura. Ancora una volta, che Il risultato è il comportamento corretto: Se si dovesse dichiararla fuori dei gestori di sfocatura (come product_calendar è dichiarato), allora si potrebbe utilizzare accidentalmente vecchi valori quando si accede a esso.

Non sono ancora sicuro esattamente come questo codice dovrebbe funzionare, ma questo script esegue in un modo che mi piacerebbe prendere in considerazione "ragionevole".

(A proposito, codice di produzione dovrebbe probabilmente consentire spazi bianchi all'inizio e alla fine delle stringhe di input.) 

    $(function() {
    var product_calendar = null;

    $('input[name=product_calendar]').css({ 'color': '#5fd27d', 'cursor': 'pointer' }).attr({ 'readonly': 'readonly' }); // Additional formatting for specified fields

    $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur
        alert('Blur'); // Added for testing
        var add_val = $('input[name=calendar_add]').attr('value');
        if (add_val != '') {
            alert('Not Blank'); // Added for testing
            var attr_val = $(product_calendar).attr('value');
            var newAdd_val = attr_val + ' ' + add_val;
            $(product_calendar).attr({ 'value': newAdd_val });
            $('#calendar_addRemove').fadeOut(500);
        }
        else {
            alert('Blank'); // Added for testing
            $('#calendar_addRemove').fadeOut(500);
        }
    });

    $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur
        alert('Blur'); // Added for testing
        var remove_val = $(this).attr('value');
        if (remove_val != '') {
            alert('Not Blank'); // Added for testing
            var attr_val = $(product_calendar).attr('value');
            if (attr_val.indexOf(remove_val) != -1) {
                alert('Eval True'); // Added for testing
                var newRemove_val = attr_val.replace(remove_val, '');
                $(product_calendar).attr({ 'value': newRemove_val });
                $('#calendar_addRemove').fadeOut(500);
            }
            else {
                alert('Eval False'); // Added for testing
                $('#calendar_remove').after('<p class="error">Occurrence Not Found</p>');
                $('.error').fadeOut(1500, function() { $(this).remove(); });
            }
        }
        else {
            alert('Blank'); // Added for testing
            $('#calendar_addRemove').fadeOut(500);
        }
    });

    $('input[name=product_calendar]').focus(function() { // Focus on any 'input[name=product_calendar]' executes function
        product_calendar = $(this);
        $('#calendar_addRemove input').attr({ 'value': '' }); // Clear input fields
        $('#calendar_addRemove').fadeIn(500);
        });
    });
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top