函数被调用两次答案

【问题标题】：Function gets called twice函数被调用两次
【发布时间】：2013-07-25 13:40:57
【问题描述】：

我在另一个 div 中保存了 3 个 div 的结构。单击这些 div 中的任何一个时，我正在运行 Jquery 函数。

目前我已经在 jQuery 中修复了一个警报。我的问题是警报被触发了两次，这可能意味着该函数被调用了两次。这不是所需的输出。

这里是FIDDLE

HTML

<div id="prompt_network_box" class="network_deck_on">
    <div id="address_header" class="address_headers_on">CHOOSE A NETWORK YOU ARE A MEMBER OF</div>
    <div class="wizzard_networks_container" id="wizzard_networks_container">
        <div id="network_picker,1,Blogger" class="wizzard_network_holder">
            <img src="media/images/social/Blogger.png" width="57" height="57" alt="Blogger">
        </div>
        <div id="network_picker,2,Art" class="wizzard_network_holder">
            <img src="media/images/social/ART.png" width="57" height="57" alt="Art">
        </div>
        <div id="network_picker,3,Tech" class="wizzard_network_holder">
            <img src="media/images/social/tech.png" width="57" height="57" alt="digg">
        </div>
    </div>
</div>

JQUERY

$('div').on('click', '[id^=network_picker]', function (e) {
    alert("YOU CLICKED IT!")
});

【问题讨论】：

您应该从修复无效标记开始。 ID 必须是唯一的，并且其中没有 ,。
您的处理程序同时为#wizzard_networks_container 和#prompt_network_box 执行
@boz 我承认它们很丑，但它们在 HTML5 中完全有效，因为没有重复项，而且它们不包含空格。
@boz 使用 id 的方式是有原因的。 ;-)
@RoryMcCrossan 你每天都会学到新东西——我认为逗号仍然是 id/类名中的非法字符！

标签： jquery html

【解决方案1】：

问题是因为您将委托附加到页面中的每个div 元素。 network_picker... 元素有两个包含 div，所以你的函数被调用了两次。

而是为委托使用单父，并使用类来过滤事件目标，如下所示：

$('#wizzard_networks_container').on('click', '.wizzard_network_holder', function (e) {
    alert("YOU CLICKED IT!")
});

Updated fiddle

我还建议更改 .wizzard_network_holder div 上的 id 属性，因为它们不是很语义化。

【讨论】：

感谢您的解释。
@AnaMaria 没问题，很乐意提供帮助。

【解决方案2】：

添加此e.stopPropagation()。

$('div').on('click', '[id^=network_picker]', function (e) {
    e.stopPropagation();
    alert("YOU CLICKED IT!")
});

而且你真的应该使用更好的 ID。没有逗号或空格，它们应该是唯一的！

【讨论】：

虽然这可能有效，但将点击事件附加到页面上的每个 div 元素并不是一个好主意。

【解决方案3】：

将您的代码更改为：

$('div[id^=network_picker]').on('click', function () {

    alert("YOU CLICKED IT!")

});

演示：http://jsfiddle.net/ksnRA/1/

【讨论】：

@RoryMcCrossan 不，on 函数会处理这个问题。演示：jsfiddle.net/ksnRA/6
不，您拥有的版本仅适用于加载时可用的 DOM 元素。 OPs original 是加载时存在的元素和之后添加的元素的委托处理程序。检查 API 中的 on() 条目。

【解决方案4】：

这是我的建议：

HTML：

<div id="prompt_network_box" class="network_deck_on">
<div id="address_header" class="address_headers_on">CHOOSE A NETWORK YOU ARE A MEMBER OF</div>
<div class="wizzard_networks_container" id="wizzard_networks_container">
    <div data-id="1" data-name="Blogger" class="wizzard_network_holder, network_picker">
        <img src="media/images/social/Blogger.png" width="57" height="57" alt="Blogger">
    </div>
    <div data-id="2" data-name="Art" class="wizzard_network_holder, network_picker">
        <img src="media/images/social/ART.png" width="57" height="57" alt="Art">
    </div>
    <div data-id="3" data-name="Tech" class="wizzard_network_holder, network_picker">
        <img src="media/images/social/tech.png" width="57" height="57" alt="digg">
    </div>
</div>

jQuery:

$('.network_picker').on('click', function (e) {
    alert("YOU CLICKED IT!");
    alert($(this).attr("data-id"));
});

我将您的 ID 更改为数据属性并将“network_picker”移至类。您可以访问 JQuery 中显示的 data-id 和 data-name

【讨论】：

【解决方案5】：

如果你写$('div')，每个div都被注册来处理点击事件，因此嵌套的div元素会被多次调用

您应该使用更独特的选择器，例如$('div.wizzard_networks_container')

【讨论】：

【解决方案6】：

试试

$('.wizzard_networks_container').on('click', '[id^=network_picker]', function (e) {
    alert("YOU CLICKED IT!")
});

【讨论】：