Question

我有以下html：

<ul id="all-terminals">

        <li data-terminal-id="101" class="">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="101">
                <a ...></a>

               ...
            </label>
        </li>

        <li data-terminal-id="100" class="active">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="100">
                <a ..></a>

               ...
            </label>
        </li>

        <li data-terminal-id="102" class="">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="102">
                <a...></a>

              ...
            </label>
        </li>
    </ul>

我写了以下听众：

$(document).on('click', '#all-terminals li label', function(){alert(123)});

当我点击标签时，我看到警报执行了twise。

为什么？

Answer 1

点击TypeError: items is null n = items.length,会自动在其中的label上创建点击事件。

假设您的所有标签都有输入，您只需更改为：

input

Fiddle

Answer 2

不完全确定原因，但mouseup有效。

$(document).on('mouseup', '#all-terminals li label', function(){alert(123)});

Answer 3

我认为你的情况正在冒泡。阅读Bubbling and Capturing

Answer 4

我不完全确定，但我认为当你点击标签时，你会击中其中2个子重叠元素。因为它们是标签的一部分但仍然是单独的元素，它会在标签上触发两个单击事件。

在小提琴上，它似乎是[a]元素重叠......

为什么监听器会激活两次？

4 个答案: