jQuery click event handler is called twice for a checkbox

Martin_19635 0
Viewed 29496

I have a problem with the following code in an ASPX page:

<script type="text/javascript">
$(document).ready(function() {
    $('.test').click(function() {
        alert("click")
    })
});
</script>

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

In the browser (FF3.5 / IE8) I have the following problem:

  • if I click the checkbox (the small square), it works as expected
  • if I click the checkbox's text ("Checkbox XYZ"), then the click event is fired twice, and the alert is shown twice.

I guess this has to do with the way the checkbox is rendered to HTML, which is like this:

<span class="test">
 <input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/>
 <label for="ctl00_c1_cb1">Checkbox XYZ</label>
</span>

How do I correctly setup the click event handler to prevent it from being called twice?

checkbox asp.net jquery
11 Answers

I had the same problem with the selector. And end up using off() function.

$('body').off('click').on('click', '<your selector>', function(){
    // Your code                
});
user_39943040
Related