jQuery Click fires twice when clicking on label
<p>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:</p>

<p>The HTML:</p>

<pre><code> &lt;div id="box"&gt;
     &lt;asp:RadioButtonList ID="RadioButtonList1" runat="server"&gt;
         &lt;asp:ListItem&gt;RADIO1&lt;/asp:ListItem&gt;
         &lt;asp:ListItem&gt;RADIO2&lt;/asp:ListItem&gt;
         &lt;asp:ListItem&gt;RADIO3&lt;/asp:ListItem&gt;
     &lt;/asp:RadioButtonList&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
       $(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
            $('&lt;div class="custom-radio"&gt;&lt;/div&gt;').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 &gt; label[for=' + $(this).attr('id') + ']').parent();
                        curDiv.removeClass('custom-radio-checked');
                        curDiv.addClass('custom-radio');
                    });
                    $(this).toggleClass('custom-radio custom-radio-checked');
                }
                else {
                    $(this).removeClass('custom-radio-checked checkedHover checkedFocus');
                }

            })
            .trigger('updateState')
            .click(function () { console.log('click'); })
            .focus(function () {
                label.addClass('focus');
            }).blur(function () {
                label.removeClass('focus checkedFocus');
            });
        }); 
       });
   &lt;/script&gt;
</code></pre>

<p>Is there any solution for this behaviour?</p>
