0

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

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

这里有一个小提琴

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>

查询

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

6 回答 6

3

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

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

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

更新的小提琴

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

于 2013-07-25T13:44:59.427 回答
2

添加这个e.stopPropagation().

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

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

于 2013-07-25T13:42:21.987 回答
1

这是我的建议：

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>

查询：

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

我将您的 ID 更改为数据属性并将“network_picker”移动到类。您可以访问数据 ID 和数据名称，如 JQuery 中所示

于 2013-07-25T13:59:22.850 回答
1

将您的代码更改为：

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

    alert("YOU CLICKED IT!")

});

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

于 2013-07-25T13:43:00.980 回答
0

尝试

$('.wizzard_networks_container').on('click', '[id^=network_picker]', function (e) {
    alert("YOU CLICKED IT!")
});
于 2013-07-25T13:46:28.737 回答
0

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

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

于 2013-07-25T13:44:01.150 回答