Question

每次点击我都会尝试检查该类是否存在，如果找到该类，则加载enscroll插件。
但问题是，在找到类st2-wr || st2之后，它再次使用click事件加载了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

您可以使用one方法

$("#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);

使用jquery在click事件上只检查一次

3 个答案: