在更改事件期间，单选按钮会影响错误的表单

我有一个包含多个表单的页面，每个单选按钮上都有一个更改侦听器，用于在更改时提交表单。除了提交错误的表单。我浏览了页面上的源代码，没有发现任何不匹配的标签（也许有人知道一个好的html linter以防万一？）。在更改事件期间，单选按钮会影响错误的表单

这是最相关的JS，我有：

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(); 
    }); 
});

调试时我在on change事件控制台和that检查指的是第一种形式，虽然this的变化范围之外的正确的是（并有一些js的样式，你可以看到，它适用于所有按钮）。因此，无线电通信局正在改变第一种形式，或者变量之间的混淆实例之间

来源

2016-07-12 MCB

我只看到你在'confirmBtns'中使用'that'，并且我看不到'confirmBtns'与'change'事件有什么关系。 –

'confirmBtns'在'startListening'中被调用，我没有包含它来避免混乱，因为一切都被称为ok。 – MCB

如何调用confirmBtns来确定this的值，这非常重要。 –

我意识到我有这个问题几年前，所以我回到那个项目，看看我做了什么。这对Google来说是个难题，所以我会为未来的搜索者自己回答。

JS不是问题，它与标签和单选按钮有关（不确定表单中的其他标签）。如果您单击标签，即使单选按钮嵌套在该标签中，似乎标签将检查其for属性，然后找到匹配id的第一个单选按钮。由于单选按钮都是相同的，它会以第一种形式更改单选按钮。所以你只需要确保每个标签和收音机都有独特的for/id's。

// 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 %>

来源

2016-07-13 03:22:58 MCB

改名var that = this不是治愈。您的that必须在使用时对现有元素进行评估。在任何印度loop您的that意味着最后使用this。已知的治疗方法是将this或that封闭。

来源

2016-07-13 03:34:33

其实，''那个'用得很好，就像我的代码一样。正如我在答复中提到的那样，标签是如何找到他们正在影响的单选按钮的。 – MCB

“用得很好，就像我的代码一样”。你说我相信。那么问题是什么？除了“那个”并不总是“你认为的是什么”？ –

在更改事件期间，单选按钮会影响错误的表单

回答

相关问题