Click-Ereignis für jede Schleife in feuert mehrmals

Ich habe eine .each Schleife wie folgt aus:Click-Ereignis für jede Schleife in feuert mehrmals

$('.form-base-subscriptions input').each(function (index, value) { 
    var uniqueId = $(this).attr('id'), 
     uniqueId = uniqueId.substring(uniqueId.lastIndexOf('_')), 
     $parent = $(this).parent(), 
     $content = $parent.html(); 
     $content = $content.split('~'), 
     input = $content[0], 
     amount = $content[4], 

var $toggle = $parent.find('.form-toggle'), 
    $checkbox = $toggle.find('input'); 

    $toggle.on('click', function() { 
     $('.form-base-subscriptions .form-toggle').removeClass('active'); 
     $('.form-base-subscriptions input').prop('checked', false); 
     $toggle.addClass('active'); 
     $checkbox.prop('checked', true); 

      var currentId = $(this).attr("id"); 

      if (currentId == "toggle_151" || currentId == "toggle_170") { 
       amount = '1.50'; 
      } else { 
       console.log('check'); 
       amount = '0'; 
      } 

      $('#toggle_153 input').attr('data-amount', amount); 
      $('#toggle_153 span').html(amount); 

     //updateWellnessPrice(); 
     updateSubscriptionAmount(); 
    });

Wie ich auslösen diese onCLick event nur einmal pro Klick? Jetzt wird es zweimal pro Klick ausgelöst.

Quelle

2016-05-06 Sreinieren

Bewegen Sie den Klick ev aus der '.each'-Schleife heraus. Momentan registrieren Sie das Click-Ereignis wegen der Schleife mehrfach. – Krishna

Möglicherweise nicht verwandt, aber Sie scheinen Variablen im globalen Bereich aufgrund eines Rogue 'fallen' '' '(oder wahrscheinlicher, wegen Rogue', 's und Sie nicht alle Variablen an der Spitze deklarieren). – Sumurai8

Brauchen Sie den relevanten HTML zu sehen - speziell, gibt es einen '.form-Toggle' (wie der Name und der Fehler implizieren) oder einen pro Eingabe (wie der Code impliziert). Wenn es nur einen gibt, möchten Sie sicherstellen, dass '$ toggle.on ('click'' nur einmal aufgerufen wird. –

Initialize-Ereignis nach der Schleife

var $toggle = ''; 
    $('.form-base-subscriptions input').each(function (index, value) { 
    var uniqueId = $(this).attr('id'), 
     uniqueId = uniqueId.substring(uniqueId.lastIndexOf('_')), 
     $parent = $(this).parent(), 
     $content = $parent.html(); 
     $content = $content.split('~'), 
     input = $content[0], 
     amount = $content[4], 

    $toggle = $parent.find('.form-toggle'), 
    $checkbox = $toggle.find('input'); 
}); 

$toggle.on('click', function() { 
      $('.form-base-subscriptions .form-toggle').removeClass('active'); 
      $('.form-base-subscriptions input').prop('checked', false); 
      $toggle.addClass('active'); 
      $checkbox.prop('checked', true); 
      updateWellnessPrice(); 
      updateSubscriptionAmount(); 
     });

Quelle

2016-05-06 12:20:18 Raki

Initialize-Ereignis nach dem Schleife und deklariere $ toggle und $ Checkbox global – Raki

Warum sollte ich diese Variablen global setzen? – Sreinieren

Wenn Sie $ toggle innerhalb der Schleife deklarieren, dann wird der Gültigkeitsbereich der Variable in der Schleife sein, hier habe ich ein Ereignis außerhalb der Schleife registriert, also $ toggle scope außerhalb der Schleife verfügbar sein, wenn Sie außerhalb deklarieren (es muss nicht global sein, sondern außerhalb der Schleife deklarieren). – Raki

eine Klasse für alle relevanten Elemente Setzen und ein Ereignis-Listener für diese Klasse hinzufügen:

HTML

<div id="toggle_n" class="myElem"> .. </div> 
...

jQuery

$(document).on('click', '.myElem', function() { 
    // Do your stuff here .. 
});

Quelle

2016-05-06 12:17:55 kapantzak

Click-Ereignis für jede Schleife in feuert mehrmals

Antwort

Verwandte Themen