jQuery呼叫单击“广播”按钮，而不会引起更改事件

Question

单击jQuery中的事件触发更改事件。有没有办法解决？我有一个单击时，我有一个广播按钮，请在另一组单独的广播按钮中调用单击事件。但是我只希望单击的第一个单击按钮即可通过我的"更改"功能。为了简化，目前选择了1A和2A。如果将2A更改为2B，则应在input[menu2]上调用更改功能。我想做的是如果您将1A更改为1B，则应在input[menu1]上调用更改功能，但在input[menu2]上不调用。

$(document).ready(function() {
  $("#1A").on("click", function() {
    $("#2A").click();
  });
  $("#1B").on("click", function() {
    $("#2B").click();
  });
// The problem is here...if menu1 is clicked, then menu2 is also clicked so this is called twice. I want it so that when menu1 is clicked, menu2's click does not hit this function.
  $("input[name='menu1'], input[name='menu2']").on("change", function() {
    // Confirmation modal appears...
    if (user.confirmChange = true) {
      // Keep things the way they are...
    } else {
      // Put things back to their original settings.
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
  <input type="radio" name="menu1opt" value="menu1OptA" id="1A" checked>Menu 1 Option A />
  <input type="radio" name="menu1opt" value="menu1OptB" id="1B">Menu 1 Option B />
</div>
<div id="menu2">
  <input type="radio" name="menu2opt" value="menu2OptA" id="2A" checked>Menu 2 Option A />
  <input type="radio" name="menu2opt" value="menu2OptB" id="2B">Menu 2 Option B />
</div>

Answer 1

将属性设置为true将导致在不执行更改事件的情况下选择它。

$(document).ready(function() {
  $("#1A").on("click", function() {
    $("#2A").prop('checked', true);
  });
  $("#1B").on("click", function() {
    $("#2B").prop('checked', true);
  });
// The problem is here...if menu1 is clicked, then menu2 is also clicked so this is called twice. I want it so that when menu1 is clicked, menu2's click does not hit this function.
  $("input[name='menu1'], input[name='menu2']").on("change", function() {
    console.log('change');
    /* Confirmation modal appears...
    if (user.confirmChange = true) {
      // Keep things the way they are...
    } else {
      // Put things back to their original settings.
    }*/
  });
});

#menu1 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
  <input type="radio" name="menu1" value="menu1OptA" id="1A" checked>Menu 1 Option A />
  <input type="radio" name="menu1" value="menu1OptB" id="1B">Menu 1 Option B />
</div>
<div id="menu2">
  <input type="radio" name="menu2" value="menu2OptA" id="2A" checked>Menu 2 Option A />
  <input type="radio" name="menu2" value="menu2OptB" id="2B">Menu 2 Option B />
</div>

Answer 2

您是否尝试过这样的事情？

$(document).ready(function() {
  $("#1A").on("click", function() {
    $("#2A").click();
  });
  $("#1B").on("click", function() {
    $("#2B").click();
  });
// The problem is here...if menu1 is clicked, then menu2 is also clicked so this is called twice. I want it so that when menu1 is clicked, menu2's click does not hit this function.
  $("#menu1 input").on("change", function() {
  alert('CHANGE!!');
    // Confirmation modal appears...
    if (user.confirmChange = true) {
      // Keep things the way they are...
    } else {
      // Put things back to their original settings.
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
  <input type="radio" name="menu1opt" value="menu1OptA" id="1A" checked>Menu 1 Option A />
  <input type="radio" name="menu1opt" value="menu1OptB" id="1B">Menu 1 Option B />
</div>
<div id="menu2">
  <input type="radio" name="menu2opt" value="menu2OptA" id="2A" checked>Menu 2 Option A />
  <input type="radio" name="menu2opt" value="menu2OptB" id="2B">Menu 2 Option B />
</div>