Javascript 使用jquery.on（）方法处理同一元素（选项标记）的两个脚本之间的冲突

我有冲突。我写了一个简单的脚本，根据类名过滤div。它可以工作，但当我添加第三方脚本时就不行了。此处的相关行是.on函数。第三方代码禁止我的代码运行。html代码中的两个目标选项标记

我尝试删除代码中的“return false”，但没有成功。试图把我的代码放在最上面…什么都没有。我考虑过使用

event.stopPropagation（）

。我读到了。这在我的案例中是否可行？我如何整合它

我想提供一个功能强大的JSFIDLE，但不幸的是，我在使用hat网站时并没有受过太多训练，因为我更习惯于使用notepad++和dreamweaver

以下是我的自定义脚本：

jQuery(document).ready(function (e) {
    var t = e("#filter-container");
    t.imagesLoaded(function () {
        t.isotope({
            itemSelector: "figure",
            filter: "*",
            resizable: false,
            animationEngine: "jquery"
        })
    });
    $("select").on("change", function () {
        var select = $(this);
        var selectedOption = select.find("option:selected");
        var r = selectedOption.attr("data-filter");
        t.isotope({
            filter: r
        });
        return false
    });
    e(window).resize(function () {
        var n = e(window).width();
        t.isotope("reLayout")
    }).trigger("resize")
});

还有第三方脚本：

(function ($, window, undefined) {   
    'use strict';

    $.DropDown = function (options, element) {
        this.$el = $(element);
        this._init(options);
    };

    // the options
    $.DropDown.defaults = {
        speed: 300,
        easing: 'ease',
        gutter: 0,
        // initial stack effect
        stack: true,
        // delay between each option animation
        delay: 0,
        // random angle and positions for the options
        random: false,
        // rotated [right||left||false] : the options will be rotated to thr right side or left side.
        // make sure to tune the transform origin in the stylesheet
        rotated: false,
        // effect to slide in the options. value is the margin to start with
        slidingIn: false,
        onOptionSelect: function (opt) {
            return false;
        }
    };

    $.DropDown.prototype = {

        _init: function (options) {

            // options
            this.options = $.extend(true, {}, $.DropDown.defaults, options);
            this._layout();
            this._initEvents();

        },
        _layout: function () {

            var self = this;
            this.minZIndex = 1000;
            var value = this._transformSelect();
            this.opts = this.listopts.children('li');
            this.optsCount = this.opts.length;
            this.size = {
                width: this.dd.width(),
                height: this.dd.height()
            };

            var elName = this.$el.attr('name'),
                elId = this.$el.attr('id'),
                inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + (new Date()).getTime();

            this.inputEl = $('<input type="hidden" name="' + inputName + '" value="' + value + '"></input>').insertAfter(this.selectlabel);

            this.selectlabel.css('z-index', this.minZIndex + this.optsCount);
            this._positionOpts();
            if (Modernizr.csstransitions) {
                setTimeout(function () {
                    self.opts.css('transition', 'all ' + self.options.speed + 'ms ' + self.options.easing);
                }, 25);
            }

        },
        _transformSelect: function () {

            var optshtml = '',
                selectlabel = '',
                value = -1;
            this.$el.children('option').each(function () {

                var $this = $(this),
                    val = isNaN($this.attr('value')) ? $this.attr('value') : Number($this.attr('value')),
                    classes = $this.attr('class'),
                    selected = $this.attr('selected'),
                    label = $this.text();

                if (val !== -1) {
                    optshtml += classes !== undefined ?
                        '<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' :
                        '<li data-value="' + val + '"><span>' + label + '</span></li>';
                }

                if (selected) {
                    selectlabel = label;
                    value = val;
                }

            });

            this.listopts = $('<ul/>').append(optshtml);
            this.selectlabel = $('<span/>').append(selectlabel);
            this.dd = $('<div class="cd-dropdown"/>').append(this.selectlabel, this.listopts).insertAfter(this.$el);
            this.$el.remove();

            return value;

        },
        _positionOpts: function (anim) {

            var self = this;

            this.listopts.css('height', 'auto');
            this.opts.each(function (i) {
                $(this).css({
                    zIndex: self.minZIndex + self.optsCount - 1 - i,
                    top: self.options.slidingIn ? (i + 1) * (self.size.height + self.options.gutter) : 0,
                    left: 0,
                    marginLeft: self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : -self.options.slidingIn : 0,
                    opacity: self.options.slidingIn ? 0 : 1,
                    transform: 'none'
                });
            });

            if (!this.options.slidingIn) {
                this.opts.eq(this.optsCount - 1)
                    .css({
                    top: this.options.stack ? 9 : 0,
                    left: this.options.stack ? 4 : 0,
                    width: this.options.stack ? this.size.width - 8 : this.size.width,
                    transform: 'none'
                })
                    .end()
                    .eq(this.optsCount - 2)
                    .css({
                    top: this.options.stack ? 6 : 0,
                    left: this.options.stack ? 2 : 0,
                    width: this.options.stack ? this.size.width - 4 : this.size.width,
                    transform: 'none'
                })
                    .end()
                    .eq(this.optsCount - 3)
                    .css({
                    top: this.options.stack ? 3 : 0,
                    left: 0,
                    transform: 'none'
                });
            }

        },
        _initEvents: function () {

            var self = this;

            this.selectlabel.on('mousedown.dropdown', function (event) {
                self.opened ? self.close() : self.open();
                return false;

            });

            this.opts.on('click.dropdown', function () {
                if (self.opened) {
                    var opt = $(this);
                    self.options.onOptionSelect(opt);
                    self.inputEl.val(opt.data('value'));
                    self.selectlabel.html(opt.html());
                    self.close();
                }
            });

        },
        open: function () {
            var self = this;
            this.dd.toggleClass('cd-active');
            this.listopts.css('height', (this.optsCount + 1) * (this.size.height + this.options.gutter));
            this.opts.each(function (i) {

                $(this).css({
                    opacity: 1,
                    top: self.options.rotated ? self.size.height + self.options.gutter : (i + 1) * (self.size.height + self.options.gutter),
                    left: self.options.random ? Math.floor(Math.random() * 11 - 5) : 0,
                    width: self.size.width,
                    marginLeft: 0,
                    transform: self.options.random ?
                        'rotate(' + Math.floor(Math.random() * 11 - 5) + 'deg)' : self.options.rotated ? self.options.rotated === 'right' ?
                        'rotate(-' + (i * 5) + 'deg)' :
                        'rotate(' + (i * 5) + 'deg)' : 'none',
                    transitionDelay: self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? (i * self.options.delay) + 'ms' : ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : 0
                });

            });
            this.opened = true;

        },
        close: function () {

            var self = this;
            this.dd.toggleClass('cd-active');
            if (this.options.delay && Modernizr.csstransitions) {
                this.opts.each(function (i) {
                    $(this).css({
                        'transition-delay': self.options.slidingIn ? ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : (i * self.options.delay) + 'ms'
                    });
                });
            }
            this._positionOpts(true);
            this.opened = false;

        }

    }

    $.fn.dropdown = function (options) {
        var instance = $.data(this, 'dropdown');
        if (typeof options === 'string') {
            var args = Array.prototype.slice.call(arguments, 1);
            this.each(function () {
                instance[options].apply(instance, args);
            });
        } else {
            this.each(function () {
                instance ? instance._init() : instance = $.data(this, 'dropdown', new $.DropDown(options, this));
            });
        }
        return instance;
    };

})(jQuery, window);

（函数（$，窗口，未定义）{
"严格使用",；
$.DropDown=函数（选项，元素）{
该.$el=$（元素）；
这是._init（选项）；
};
//选择
$.DropDown.defaults={
速度:300,，
放松：“放松”，
排水沟：0，
//初始叠加效应
斯塔克：没错，
//每个选项动画之间的延迟
延迟：0，
//选项的随机角度和位置
随机：错，
//旋转[右| |左| |假]：选项将旋转到右侧或左侧。
//确保在样式表中调整变换原点
旋转：假，
//在选项中滑动的效果。值是开始时的边距
斯莱丁：错，
onOptionSelect：功能（opt）{
返回false；
}
};
$.DropDown.prototype={
_初始化：函数（选项）{
//选择权
this.options=$.extend（true，{}，$.DropDown.defaults，options）；
这个；
这个；
},
_布局：功能（）{
var self=这个；
这个.minZIndex=1000；
var值=此值。_transformSelect（）；
this.opts=this.listopts.children（'li'）；
this.optcount=this.opts.length；
此文件的大小={
宽度：此.dd.width（），
高度：此dd.height（）
};
var elName=this.$el.attr（'name'），
elId=此。$el.attr（'id'），
inputName=elName！==未定义？elName:elId！==未定义？elId:“cd下拉列表-”+（新日期（））.getTime（）；
this.inputEl=$（''）.insertAfter（this.selectlabel）；
this.selectlabel.css（'z-index'，this.minZIndex+this.optcount）；
这个位置选择（）；
国际单项体育联合会（现代化委员会）{
setTimeout（函数（）{
self.opts.css（'transition'、'all'+self.options.speed+'ms'+self.options.easing））；
}, 25);
}
},
_transformSelect:函数（）{
var optshtml=“”，
选择标签=“”，
值=-1；
这是$el.children（'option'）。每个（函数（）{
变量$this=$（this），
val=isNaN（$this.attr（'value'））？$this.attr（'value'）：编号（$this.attr（'value'）），
classes=$this.attr（'class'），
selected=$this.attr（'selected'），
label=$this.text（）；
如果（val！=-1）{
optshtml+=类！==未定义？
“
“+label+”
”：
““+label+””；
}
如果（选定）{
选择标签=标签；
值=val；
}
});
this.listopts=$（'
'）.append（optshtml）；
this.selectlabel=$（''）.append（selectlabel）；
this.dd=$（''）.append（this.selectlabel，this.listopts）.insertAfter（this.electLabel）；
这个。$el.remove（）；
返回值；
},
_位置选项：功能（动画）{
var self=这个；
this.listopts.css（'height'，'auto'）；
此.opts.each（函数（i）{
$（this.css）({
zIndex:self.minZIndex+self.optsCount-1-i，
顶部：self.options.slidegin？（i+1）*（self.size.height+self.options.gutter）：0，
左:0,，
marginLeft:self.options.slidegin？i%2==0？self.options.slidegin:-self.options.slidegin:0，
不透明度：self.options.slidegin？0:1，
转换：“无”
});
});
如果（！this.options.slidegin）{
this.opts.eq（this.optcount-1）
.css({
顶部：this.options.stack？9:0，
左：this.options.stack？4:0，
宽度：this.options.stack？this.size.width-8:this.size.width，
转换：“无”
})
(完)
.eq（this.optsCount-2）
.css({
顶部：this.options.stack？6:0，
左：this.options.stack？2:0，
宽度：this.options.stack？this.size.width-4:this.size.width，
转换：“无”
})
(完)
.eq（this.optsCount-3）
.css({
顶部：this.options.stack？3:0，
左:0,，
转换：“无”
});
}
},
_initEvents:function（）{
var self=这个；
this.selectlabel.on（'mousedown.dropdown'，函数（事件）{
self.open？self.close（）：self.open（）；
返回false；
});
$(function () {
    var t = $("#filter-container");

    t.imagesLoaded(function () {
        t.isotope({
            itemSelector: "figure",
            filter: "*",
            resizable: false,
            animationEngine: "jquery"
        });
    });        

    $(window).on('resize', function () {
        var n = $(this).width();

        t.isotope("reLayout");        
    }).trigger("resize");
});

$(function () {
    $('#cd-dropdown').dropdown({
        gutter : 5,
        onOptionSelect: function (opt) {
            $("#filter-container").isotope({
                filter: opt.data('value')
            });
        }
    });
});

<select id="cd-dropdown" class="cd-select">
    <option value="*" selected>Pick a Genre</option>
    <option value="*">All</option>
    <option value=".epic">Epic</option>
    <option value=".classic">Classic</option>
    <option value=".regional">Regional</option>
    <option value=".electronic">Electronic</option>
</select>