Edit Question - KnowledgeHub

Title Body

I am using jQuery to create custom radio buttons and i have a problem. When clicking on the label that associated with the radio the click events fires twice, if i click only on the radio itself it's working fine (well actually it's not the radio i am clicking but the div that wraps the whole input and label). Here is the code: The HTML: <div id="box"> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem>RADIO1</asp:ListItem> <asp:ListItem>RADIO2</asp:ListItem> <asp:ListItem>RADIO3</asp:ListItem> </asp:RadioButtonList> </div> jQuery: <script type="text/javascript"> $(function () { $('#box').find('input:radio').each(function (i) { var input = $(this); // get the associated label using the input's id var label = $('label[for=' + input.attr('id') + ']'); // wrap the input + label in a div $('<div class="custom-radio"></div>').insertBefore(input).append(label, input); var wrapperDiv = input.parent(); // find all inputs in this set using the shared name attribute var allInputs = $('input[name=' + input.attr('name') + ']'); // necessary for browsers that don't support the :hover pseudo class on labels label.hover( function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover checkedHover'); }); //bind custom event, trigger it, bind click,focus,blur events wrapperDiv.bind('updateState', function () { if ($(this)[0].children[1].checked) { allInputs.each(function () { var curDiv = $('div > label[for=' + $(this).attr('id') + ']').parent(); cu

Tags (comma-separated) Cancel