0

別の div 内に保持されている 3 つの div の構造があります。これらの div をクリックすると、Jquery 関数が実行されます。

現在、jQuery 内のアラートを修正しました。私の問題は、アラートが2回トリガーされることです。これは、おそらく関数が2回呼び出されることを意味します。これは望ましい出力ではありません。

ここにフィドル

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>

Jクエリ

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

6 に答える 6

3

問題は、デリゲートをdivページ内のすべての要素にアタッチしているためです。要素には 2 つのnetwork_picker...包含 div があるため、関数は 2 回呼び出されます。

代わりに、デリゲートに単一の親を使用し、次のようにクラスを使用してイベント ターゲットをフィルター処理します。

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

更新されたフィドル

idまた、div の属性は.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

コードを次のように変更します。

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

    alert("YOU CLICKED IT!")

});

デモ: http://jsfiddle.net/ksnRA/1/

于 2013-07-25T13:43:00.980 に答える
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>

JQuery:

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

ID を data-attributes に変更し、「network_picker」をクラスに移動しました。JQueryに示されているように、データIDとデータ名にアクセスできます

于 2013-07-25T13:59:22.850 に答える
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 に答える