javascript - 使用 jquery 只检查一次点击事件

Question

每次单击时，我都尝试检查该类是否存在，如果找到该类，则加载enscroll插件。
但问题是，在找到类之后st2-wr || st2，它再次加载带有点击事件的 enscroll 插件，因为该类存在，

我只想在找到类后加载插件。

$('.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'
         });
     }
});

Answer 1

如果我理解你的目标，一个可能的片段：

$('.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);

    }
});

Answer 2

您可以使用一种方法

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

另一种方法是使用一些外部布尔变量来告诉您插件是否已加载。

Answer 3

(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);