CODEWITHSUNDEEP
jqueryhtml
Dylan Klomparens
Dylan Klomparens

Reputation: 2932

jQuery one not firing per element

I have some HTML code which creates three jQuery icons:

<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="1"></span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="2"></span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="3"></span>

And some JavaScript jQuery code which I want to fire once per icon that is clicked. It works fine when I use this:

$(".one-click").one("click", function() { alert(this.dataset.customerId) } );

However, when I try to use one of my own functions it only fires for the first icon clicked. It never fires when another icon is clicked for the first time:

$(".one-click").one("click", function() { my_custom_function(this.dataset.customerId) } );

It works fine for the first icon that is clicked, but does not fire for the other icons that are clicked. The jQuery documentation says that it should fire once per element per event type. What am I missing? my_custom_function should execute for each element clicked...

Edit:

I should elaborate about my_custom_function. It actually reloads the spans from the web server. Specifically, they're enclosed in a div:

<div id="my_div">
    <span class="ui-icon ui-icon-circle-close one-click" data-customer-id="1"></span>
    <span class="ui-icon ui-icon-circle-close one-click" data-customer-id="2"></span>
    <span class="ui-icon ui-icon-circle-close one-click" data-customer-id="3"></span>
</div>

... and somewhere inside my_custom_function I reload using $("#my_div").load("/some_url/"). After commenting this load line out, the functions appear to be firing correctly. How can I apply the one-time-trigger functions after load()? Calling one() on the elements again doesn't seem to be doing the trick.

Upvotes: 0

Views: 324

Answers (2)

Raghvendra Parashar
Raghvendra Parashar

Reputation: 4053

take a look :

<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="1">s1</span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="2">s2</span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="3">s3</span>

$(document).ready(function(){
    function my_custom_function(cust_id) {
        alert(cust_id);
    }
    $(".one-click").one("click", function() {
        my_custom_function(this.dataset.customerId);
    });
});

http://jsfiddle.net/F7Kdy/5/

Upvotes: 1

Scott
Scott

Reputation: 1872

Either rewrite it as: 

$(".one-click").one("click", my_custom_function),

or structure it as a callable function like this: http://jsfiddle.net/scott_in_ct/QbpC8/

Upvotes: 0

Related Questions