Обработчик события jQuery вызывается дважды для флажка

У меня есть проблема со следующим кодом на странице ASPX:

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

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

В браузере (FF3.5/IE8) у меня возникает следующая проблема:

Если я нажму на флажок (маленький квадрат), он будет работать как ожидалось
если я нажму на значок флажка ( "Checkbox XYZ" ), тогда событие click будет запущено дважды, а предупреждение будет показано дважды.

Я предполагаю, что это связано с тем, как этот флажок отображается в HTML, который выглядит следующим образом:

<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>

Как правильно настроить обработчик события клика, чтобы он не вызывался дважды?

Ответы

Ответ 1

После того, как я снова прочитал свой вопрос, я нашел способ его решения.

Просто добавьте "enter" в селектор jQuery:

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

Ответ 2

Я только что испытал одно и то же, но не уверен, что пузырь событий вызывает мою проблему. У меня есть настраиваемый элемент управления деревом, и когда элемент открывается, я использую $(id).click() для присоединения обработчика ко всем элементам определенного типа.

Я подозреваю, что это означает, что существующие элементы в другом месте, которые уже имеют событие, могут снова добавить его. Я обнаружил, что открепление всего, а затем повторное связывание решает мою проблему, таким образом:

$('img.load_expand').unbind("click").click(function()
{
  // handler
});

Ответ 3

Я думаю, потому что a <label> с атрибутом for вызывает событие click элемента <input type="radio"> или <input type="checkbox">, которое связано при нажатии.

Итак, в вашем коде jQuery вы настроили обработчик события щелчка для <label> и <input> внутри <span class="test">. При нажатии на <label> будет выполняться обработчик события клика, который вы настроили на метке, тогда обработчик события клика, настроенный на <input>, будет выполняться, когда метка вызывает событие click на <input>.

Ответ 4

$(document).ready(function() {
    $('.test').click(function(event) {
                    event.stopImmediatePropagation();
                    alert("Click");
                    })
                 }
              );

Мне удалось заставить мой код работать, остановив событие "Распространение". Это не повлияло на изменение статуса флажка.

Ответ 5

Просто используйте .mouseup, а не .click

Ответ 6

То, что вы видите, это пузырь событий. Событие click сначала обрабатывается меткой, а затем передается в этот флажок. Вы получаете одно предупреждение для каждого. Чтобы предотвратить пузырьки событий, вам нужно вернуть false в обработчик кликов.

$(document).ready(function() {
        $('.test').click(function() {
                alert("Click");
                return false;
        })
});

Однако, хотя это предотвращает пузырьки событий, также имеет нежелательный побочный эффект, препятствующий изменению состояния флажка. Таким образом, вам нужно будет создать код вокруг этого.

Ответ 7

Решено: это работать с Firefox 3.6.12 и IE8.

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

Фокус в unbind("click"). перед привязкой к .click(fn); это отключит одно и то же событие для двухкратного запуска.

Обратите внимание, что событие "change" не будет проверяться в первый раз. Поэтому я использую "click".

Ответ 8

Я столкнулся с той же проблемой с событием click и нашел эту статью. В сущности, если у вас есть несколько функций, поддерживающих документ jQuery, внутри <body></body> теги, вы можете получить несколько событий. Исправить это, конечно, не делать этого, или отменить событие щелчка и переустановить его, как указано выше. Иногда, с несколькими библиотеками javascript, может быть трудно избежать нескольких document.ready(), поэтому unbind - хороший способ обхода.

<code>
$('#my-div-id').unbind("click").click(function()
  {
    alert('only click once!');
  }
</code>

Ответ 9

Я знаю, что вопрос давно закрыт, но я столкнулся с одной и той же проблемой, и хочу добавить найденное решение, может пригодиться для подобных проблем в будущем.

При добавлении ASP-кода, например:

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

проблема заключается в том, что <asp:CheckBox ...> не является элементом управления html, а только что-то ASP ~~, составленным из закрученного ума какого-то психопата~~, поэтому браузер получит что-то еще.

Браузер получит что-то вроде:

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

Одно из многих возможных решений:

Браузер получает диапазон, содержимое которого содержит входной флажок и метку для него с текстом. Поэтому мое решение для этого было бы чем-то вроде:

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

Что там произошло? Этот селектор $('.test > :checkbox') означает: найти элементы с классом "test" и принести любой флажок, который он содержит.

Ответ 10

Функция выполняется дважды. Один раз изнутри, а затем он снова вызван изнутри. Просто добавьте оператор возврата в конец.

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

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

Это отлично сработало для меня.