简体   繁体   中英

Radio button on click event requires two clicks

Basically I have two radio buttons which sit in a form. When the first radio button is checked, a form appears which enables a new user to register on the site. The second one is for already registered users who want to sign in.

I've included some jVal form validation. Now, if I check the second radio button, and type an invalid password in the password field (something that doesn't pass the jVal validation), an error message appears. The behavior so far is okay. However, if I now check the first radio button (the one for new users), the error message stays there. I've tried to override this by adding a click event to the first radio button, which should hide the error message from the previous screen once clicked.

radioButton.on('click', function(){
    errorDiv.popover('hide');
    console.log('click event registered');
});

The problem is that I need to click the radio button twice in order to get the click event to register...

Anyone got a clue on the issue and why do I have to click the radio button twice so that the event can be registered?

This demo shows a solution in action: DEMO

It is a very simple Jquery:

<body>
<form>
  <input type="radio" value="1" name="test" />Value1
  <br />
   <input type="radio" value="2" name="test" />Value2
  <br />
   <input type="radio" value="3" name="test" />Value3
  </form>
  <script>
    $(document).ready(function(){
      $("input[name='test']").click(function(){
        alert($(this).val());
      })
    })
  </script>
</body>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM