jQuery call click on radio button without causing a change event

Question

Click events trigger change events in jQuery. Is there any way around this? I have a radio button that when clicked, calls a click event on another radio button in a separate set of radio buttons. But I only want the first radio button that was clicked to go through my "change" function. To simplify, 1A and 2A are currently selected. If you change 2A to 2B, then the change function should be called on input[menu2] . What I want to do is if you change 1A to 1B, then the change function should be called on input[menu1] but not on 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

Setting the property checked to true will cause it to be selected without performing the change event.

 $(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

Have you tried something like this?

 $(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>