check only once on click event with jquery

Question

On every click i tried to check if the class exists, and if the class found then load the enscroll plugin.
but the problem is, after find the class st2-wr || st2, its again load the enscroll plugin with click event because the class exists,

i want only once the plugin load after finding the class.

$('.embtn').delegate(this, 'click', function(){
    var $sec = $(this).closest('.sec'), 
        $parentSection = $sec.closest('.m_ms');

    if($parentSection.hasClass('st2-wr') || $parentSection.hasClass('st2')){
        $('.ms_box').enscroll({
                 showOnHover: true,
                 verticalTrackClass: 'track3',
                 verticalHandleClass: 'handle3'
         });
     }
});

which version of jquery are you using?

A. Wolff
– A. Wolff

2013-06-01 09:09:01 +00:00
Commented Jun 1, 2013 at 9:09 — A. Wolff
– A. Wolff, Commented Jun 1, 2013 at 9:09
@roasted 1.9.1 version.

jogesh_pi
– jogesh_pi

2013-06-01 09:09:57 +00:00
Commented Jun 1, 2013 at 9:09 — jogesh_pi
– jogesh_pi, Commented Jun 1, 2013 at 9:09

A. Wolff · Accepted Answer · 2013-06-01 11:25:25Z

3

A possible snippet if i understood your goal:

$('.embtn').on('click', function () {
    var $sec = $(this).closest('.sec'),
        $parentSection = $sec.closest('.m_ms');

    if (!$('.ms_box').data('enscroll') && ($parentSection.hasClass('st2-wr') || $parentSection.hasClass('st2'))) {
        $('.ms_box').enscroll({
            showOnHover: true,
            verticalTrackClass: 'track3',
            verticalHandleClass: 'handle3'
        }).data('enscroll', true);

    }
});

edited Jun 1, 2013 at 11:25

answered Jun 1, 2013 at 9:19

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

8 Comments

jogesh_pi Over a year ago

is there any specific reason behind using .on() instead of .delegate()??

A. Wolff Over a year ago

no, and here using .on() my code is wrong. I updated as .on() delegation accept only 'selector'. .on() is just the new alias for bind/delegate & live, for consistency

A. Wolff Over a year ago

sorry for wrong order of params using delegate, updated answer and i need coffee :)

jogesh_pi Over a year ago

:) ofcause, but one more thing, i didn't tried before the .data() method, but it's not working, i thing the possible reason is, i already used the enscroll() plugin on page load on other element, and this the second time that i want to use on the different element?? is this the reason of not working this code?

jogesh_pi Over a year ago

OOPPS a big mistake by me.. the code is working @rasted :), thankks

|

nKognito · Accepted Answer · 2013-06-01 09:05:04Z

1

You can use one method

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

Other way is to use some external boolean variable that will tell you if the plugin has been loaded.

answered Jun 1, 2013 at 9:05

nKognito

6,37318 gold badges79 silver badges141 bronze badges

3 Comments

A. Wolff Over a year ago

one() method doesn't support delegation

jogesh_pi Over a year ago

@nKognito The handler is executed at most once per element.- one(), i am using the click event on a button, that have to press more then once..

nKognito Over a year ago

@jogesh_pi Other way is to use some external boolean variable that will tell you if the plugin has been loaded.

Hugo Mallet · Accepted Answer · 2013-06-01 10:04:37Z

0

(function(self) {
    function enscroll() {
        var $sec = $(this).closest('.sec'), 
            $parentSection = $sec.closest('.m_ms');

        if($parentSection.hasClass('st2-wr') || $parentSection.hasClass('st2')){
            $('.ms_box').enscroll({
                showOnHover: true,
                verticalTrackClass: 'track3',
                verticalHandleClass: 'handle3'
            });
            $('.embtn').off('click', self, enscroll);
        }
    }
    $('.embtn')
        .on('click', self, enscroll)
        .on('click', self, function() {
            // Other click handler executed each time
        });
})(this);

edited Jun 1, 2013 at 10:04

answered Jun 1, 2013 at 9:17

Hugo Mallet

5535 silver badges8 bronze badges

1 Comment

Hugo Mallet Over a year ago

Maybe better because the click handler will be executed once and the dom tree browsed (closest) once too...

Collectives™ on Stack Overflow

check only once on click event with jquery

3 Answers 3

8 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related