CODEWITHSUNDEEP
jqueryhtml
AnaMaria
AnaMaria

Reputation: 3621

Function gets called twice

I have a structure of 3 div's held inside another div. On click of any of these divs i am running a Jquery function.

Currently I have fixed an Alert within the jQuery. My problem is that the Alert gets triggered twice which probably means the function gets called twice. This is not the desired output.

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

Upvotes: 0

Views: 115

Answers (6)

Spoke
Spoke

Reputation: 96

Here my suggestion:

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

I changed your ids to data-attributes and moved the "network_picker" to classes. You can access the data-id and data-name as shown in the JQuery

Upvotes: 1

svillamayor
svillamayor

Reputation: 546

try

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

The problem is because you are atttaching the delegate to EVERY div element in the page. The network_picker... elements have two containing divs, so you the function is called twice.

Instead use a single parent for the delegate, and use the classes to filter the event targets, like this:

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

Updated fiddle

I'd also suggest changing the id attributes on the .wizzard_network_holder divs as they're not very semantic.

Upvotes: 3

peterp
peterp

Reputation: 3121

If you write $('div') every div is registered to handle the click event, thus it is called multiple times for nested div elements

You should use a more distinct selector, e.g. $('div.wizzard_networks_container')

Upvotes: 0

Pieter
Pieter

Reputation: 1833

Change your code to this:

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

    alert("YOU CLICKED IT!")

});

Demo:http://jsfiddle.net/ksnRA/1/

Upvotes: 1

Rutwick Gangurde
Rutwick Gangurde

Reputation: 4922

Add this e.stopPropagation().

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

And you seriously should use better ids. No commas or spaces and they should be unique!

Upvotes: 2

Related Questions