Question

我有一个页面，其中包含多个表单，并且每个单选按钮上都有一个更改侦听器，以便在更改时提交表单。除此之外，它提交了错误的表格。我浏览了页面上的源代码并没有找到任何不匹配的标签（也许有人知道一个好的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();
  });
});

调试时我在控制台中检查了that事件中的on change是指第一个表单，尽管更改范围之外的this是正确的（并且有一些js样式正如你所看到的，它适用于所有按钮）。因此无线电btn正在改变第一种形式，或者变量在实例之间变得混淆

Answer 1

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

JS不是问题，它与标签和单选按钮有关（不确定表单中的其他标签）。如果您单击标签，即使单选按钮嵌套在其中，标签似乎也会检查其for属性，然后找到匹配id的第一个单选按钮。由于单选按钮完全相同，因此更改了第一种形式的单选按钮。因此，您只需要确保每个标签和广播都有唯一的for / id。

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

重命名var that = this不是治愈方法。您的that必须在使用时评估现有元素。在loop的{{1}}中，that表示最后使用的this。已知的治疗方法是将this或that包裹到闭包中。

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

2 个答案: