函數被調用兩次

我有一個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

函數被調用兩次

回答

相關問題