函数被调用两次

我有一个3 div的结构在另一个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!") 
});

来源

2013-07-25 AnaMaria

中所示访问数据标识和数据名称。您应该先修复无效标记。 ID必须是唯一的，并且没有'，'在其中。 – boz

您的处理程序对#wizzard_networks_container和#prompt_network_box都有效＃ – svillamayor

@boz我承认它们很丑，但它们在HTML5中完全有效，因为没有重复项，并且它们不包含空格。 –

的问题是，因为你是atttaching委托在页面EVERY div元素。 network_picker...元素有两个包含div，所以你函数被调用两次。

而是使用一个单亲的委托，并使用类来过滤事件的目标，就像这样：

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

Updated fiddle

我还建议在.wizzard_network_holder改变id属性因为它们不是很有语义性。

来源

2013-07-25 13:44:59

感谢您的解释。 – AnaMaria

@AnaMaria没问题，很高兴帮助。 –

添加此e.stopPropagation()。

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

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

来源

2013-07-25 13:42:21

尽管这可能有效，但将附加的click事件附加到页面上的每个div元素并不是一个好主意。 –

你的代码改成这样：

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

    alert("YOU CLICKED IT!") 

});

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

来源

2013-07-25 13:43:00 Pieter

如果它们是动态追加的，这将不起作用。 –

@RoryMcCrossan不，“on”函数将处理该问题。演示：http://jsfiddle.net/ksnRA/6/ – Pieter

不，您拥有的版本只适用于可用的DOM元素。原始的OP是一个委托处理程序，用于存在于加载中的元素和之后添加的元素。检查API中的on（）条目。 –

如果你写$('div')每格被注册处理click事件，因此它被称为多次嵌套的div元素

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

来源

2013-07-25 13:44:01 peterp

尝试

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

来源

2013-07-25 13:46:28 svillamayor

这里我的建议：

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

来源

2013-07-25 13:59:22 Spoke

函数被调用两次

回答

相关问题