Jquery 函数被调用两次

我有一个由3个div组成的结构，保存在另一个div中。单击其中任何一个div，我就运行Jquery函数

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

这里有一个

HTML

---

添加此

e.stopPropagation（）

---

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

将代码更改为：

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

    alert("YOU CLICKED IT!")

});

演示：

如果您编写

$（'div'）

每个div都被注册以处理click事件，因此嵌套的div元素会多次调用它

---

您应该使用更独特的选择器，例如，

$（'div.wizzard\u networks\u container'）

问题在于您正在将代理附加到页面中的每个

div

元素。

network\u picker…

元素有两个包含div的元素，因此该函数被调用两次

而是为委托使用单个父级，并使用类筛选事件目标，如下所示：

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

我还建议更改

.wizzard\u network\u holder

div上的

id

属性，因为它们不是很有语义。

试试看

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

我的建议如下：

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>

---

我将您的ID更改为数据属性，并将“网络选择器”移动到类。您可以访问JQuery中显示的数据id和数据名称。您应该首先修复无效的标记。ID必须是唯一的，并且其中没有

，

。您的处理程序对#wizzard_networks_容器和#prompt_network#执行_box@boz我承认它们很难看，但它们在HTML5中完全有效，因为它们没有重复项，也不包含空格。@boz使用id的方式是有原因的。；-）@RoryMcCrossan你每天都能学到一些新东西——我还以为逗号在ID/类名中仍然是非法字符呢！虽然这可能会起作用，但将单击事件附加到页面上的每个

div

元素并不是一个好主意。@RoryMcCrossan否，上的

函数将处理该问题。演示：不，您的版本只适用于加载时可用的DOM元素。OPs-original是一个委托处理程序，用于加载时存在的元素和加载后添加的元素。检查API中的
on（）
项。感谢您的解释。@AnaMaria没问题，很乐意帮助。
$('#wizzard_networks_container').on('click', '.wizzard_network_holder', function (e) {
    alert("YOU CLICKED IT!")
});

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

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

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