Question

我在另一个div里面有一个3 div的结构。点击任何这些div我正在运行Jquery函数。

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

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!")
});

Answer 1

问题是因为您正在将委托附加到页面中的每个div元素。 network_picker...元素有两个包含div，因此您可以调用该函数两次。

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

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

Updated fiddle

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

Answer 2

添加此e.stopPropagation()。

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

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

Answer 3

将您的代码更改为：

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

    alert("YOU CLICKED IT!")

});

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

Answer 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

中所示

Answer 5

如果您编写$('div')，则每个div都会被注册以处理click事件，因此对于嵌套的div元素，它会被多次调用

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

Answer 6

试

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

函数被调用两次

6 个答案: