Während der Änderung Ereignis-Optionsfeld wirkt sich auf falsches Formular

Question

Ich habe eine Seite mit mehreren Formularen und eine Änderung Listener auf jeweils ein paar Optionsfelder, um das Formular bei Änderung zu übermitteln. Außer, es ist das falsche Formular. Ich ging durch den Quellcode auf der Seite und fand keine unübertroffenen Tags (vielleicht weiß jemand einen guten HTML-Link nur für den Fall?).

Das sind die wichtigsten JS ist ich habe:

var AcceptanceBtns = this.AcceptanceBtns = function (accBtnForm) { 
    this.acceptanceBtnForm = accBtnForm; 

    this.labels = this.acceptanceBtnForm.find("label.approval-buttons"); 

    this.radios = this.labels.find("input.radio-btn"); 

    this.checkedRadio = this.radios.filter(':checked'); 
    this.styleCheckedBtn(); 
    } 

    AcceptanceBtns.prototype.confirmBtns = function() { 
    var that = this; 
    this.styleAcceptBtn() 
    this.radios.on("change", function() { 
     console.log("going"); 
     var radio = $(this); 
     var label = radio.parent(); 
     that.styleBtnsOnChange(label) 
     that.radios.off(); 
     that.acceptanceBtnForm.submit(); 
    }); 
    }; 

    AcceptanceBtns.prototype.startListening = function() { 
    if (this.acceptanceBtnForm.length === 0) { return; } 
    this.confirmBtns(); 
    this.submitResponse(); 
    }; 

    var AcceptAffiliateBtns = this.AcceptAffiliateBtns = function (formEl) { 
    AB.call(this, formEl); 
    }; 

    AcceptAffiliateBtns.prototype = Object.create(AB.prototype); 

    AcceptAffiliateBtns.prototype.constructor = AcceptAffiliateBtns; 

$(document).on("page:change", function() { 
    if (typeof aab === 'undefined') { 
    var aab = {}; 
    } else { 
    $.each(aab, function (key, val) { val.stopListening(); }); 
    } 
    $('form.accepting-affiliates').each(function (i, el) { 
    aab[i.toString()] = new AcceptAffiliateBtns ($(el)); 
    aab[i.toString()].startListening(); 
    }); 
}); 

Beim Debuggen ich in der Konsole und that im on change Ereignis der ersten Form bezieht, geprüft obwohl this außerhalb des auf Änderung Umfang korrekt ist (und es gibt einige js Styling wie Sie sehen können und es funktioniert gut für alle Tasten). Entweder ändert das Radio btn die erste Form oder die Variablen werden zwischen Instanzen verwechselt.

Answer 1

Ich erkannte, dass ich dieses Problem vor ein paar Jahren hatte, also ging ich zurück zu diesem Projekt, um zu sehen, was ich tat. Es ist ein schweres Problem für Google, daher werde ich es selbst für zukünftige Suchanfragen beantworten.

Das JS war kein Problem, es hat mit Etiketten und Optionsfeldern zu tun (nicht sicher über andere Tags in Formularen). Wenn Sie auf das Label klicken, scheint das Label das for-Attribut zu überprüfen, selbst wenn das Optionsfeld darin eingebettet ist. Suchen Sie dann das erste Optionsfeld mit dem passenden id. Da die Optionsfelder alle gleich sind, ändert sich das Optionsfeld in der ersten Form. So müssen Sie nur sicherstellen, dass jedes Etikett und Radio einzigartige for/id hat.

// var x = randomNumber(); 
<label for="aab_" + x> 
    <input id="aab_" + x selected="selected" type="radio" value="true" checked="checked" name="foo[bar]" />Accept 
</label> 

// var y = randomNumber();  
<label for="aab_" + y> 
    <input id="aab_" + y selected="selected" type="radio" value="false" name="foo[bar]" />Reject 
</label> 

Rails solution: 
<%= f.collection_radio_buttons(:bar, [[true, 'Accept'],[false, 'Reject']], 
:first, :last, { selected: true }) do |b| %> 
    <%= b.label(for: "aab_#{b.object_id}") { 
    b.radio_button(id: "aab_#{b.object_id}") + b.text } %> 
<% end %> 

Answer 2

Umbenennen var that = this ist keine Heilung. Ihre that muss zu einem vorhandenen Element im Moment der Verwendung ausgewertet werden. In jedem Ind der loop Ihre that bedeutet die letzte this verwendet. Die bekannte Härtung besteht darin, this oder that in einen Verschluss einzuwickeln.