jQuery prevent function to duplicate on click

Question

I want to initiate a plugin only if clicked on its parent element (because that element is being appended with jQuery so it does not exist when page loads), So I am trying following code:

$(document).on('click', '.wrap', function(){
    ColorPicker(

        document.getElementById('slider'),
        document.getElementById('picker'),

        function(hex, hsv, rgb) {

        });
});

This works fine, but every time I click on the .wrap, it duplicates (please check the demo to see the problem). Is there anyway to fix it?

Demo: http://jsfiddle.net/rhzzG/

(Click in the box to see the problem)

Thanks.

James Donnelly · Accepted Answer · 2013-10-29 11:03:18Z

2

Rather than using on() to trigger this event every time the element is clicked, simply use jQuery's one() method to only fire it once:

$(document).one('click', '.wrap', function(){ ... });

ColorPicker will then take over from there with handling its own events.

JSFiddle demo.

answered Oct 29, 2013 at 11:03

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Alpha · Accepted Answer · 2013-10-29 11:03:51Z

2

You may use one instead

$(document).one('click', '.wrap', function(){
    //...
});

answered Oct 29, 2013 at 11:03

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Collectives™ on Stack Overflow

jQuery prevent function to duplicate on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related