发表新帖
发表新帖

jQuery click event handler is called twice for a checkbox

前端 未结
关注
10 1934
野趣味
野趣味 2020-12-09 17:08

I have a problem with the following code in an ASPX page:
相关标签:
10条回答
  • 栀梦
    2020-12-09 17:25

    Just use .mouseup rather than .click

    0 讨论(0)
  • 情书的邮戳
    2020-12-09 17:26

    I ran into the same issue with a click event, and found this article. In essence, if you have more than one jQuery document-ready functions inside the <body></body> tags, you can get multiple events. The fix is, of course, to not do that, or to unbind the click event and rebind it, as noted above. Sometimes, with multiple javascript libraries, it can be hard to avoid multiple document.ready()'s, so the unbind is a good workaround.

    <code>
$('#my-div-id').unbind("click").click(function()
  {
    alert('only click once!');
  }
</code>
    0 讨论(0)
  • 情书的邮戳
    2020-12-09 17:30

    Well after reading my question again, I found a way how to solve it.

    Just add "input" to the jQuery selector:

    <script type="text/javascript">
$(document).ready(function() {
        $('.test input').click(function() {
                alert("click")
        })
});
</script>
    0 讨论(0)
  • 星月不相逢
    2020-12-09 17:34

    I have just experienced the same thing, but am not sure that event bubbling is causing my issue. I have a custom tree control, and when an item is opened, I use $(id).click() to attach a handler to all elements of a certain kind.

    I suspect that this means that existing items elsewhere that already have the event, may then have it added again. I found that unbinding everything then re-binding solved my problem, thus:

    $('img.load_expand').unbind("click").click(function()
{
  // handler
});
    0 讨论(0)
  • 执念已碎
    2020-12-09 17:36

    Solved: this to work with Firefox 3.6.12 and IE8.

    $(function(){
        $("form input:checkbox").unbind("click")
        .click(function(){
            val = $(this).val();
            alert(val);
        })
    }

    The trick is to unbind("click"). before bind it to .click(fn); this will disabled the same event to fire twice.

    Note that event "change" will not tricker at first time checkbox has been checked. So I use "click" instead.

    0 讨论(0)
  • 生来不讨喜
    2020-12-09 17:37

    I know the question is far closed now, but I just have faced the same problem and I want to add the solution I found, may come in handy for similar problems on the future.

    When you add ASP code like: 

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

    the problem is that <asp:CheckBox ...> is not an html control, it's just something ASP made up from the twisted mind of some psycho invented, so the browser will receive something else.

    The browser will receive something like:

    <span class="test">
    <input id="garbageforYourId_cb1" type="checkbox" name="garbage$moregarbage$cb1"/>
    <label for="evenMoreGarbage_cb1">Checkbox XYZ</label>
</span>

    One of many possible solutions:

    The browser receive a span which content an input "checkbox" and a label for it with your text. Therefore my solution for this would be something like:

    $('.test > :checkbox').click(function() {
    if ($(this).attr("checked")) {
        alert("checked!!!");
    } else {
        alert("non checked!!!");
    }
});

    What happened up there? This selector $('.test > :checkbox') means: find the elements with the class "test" and bring any checkbox that it contains.

    0 讨论(0)
 看不清?
提交回复
热议问题