兩個插件。 兩者在同一元素上都有點擊事件，但其中一個抵消了另一個

Question

（下面的問題）

在這里，第一個腳本充當過濾器，單擊.filter按鈕a時，將過濾掉與相應數據過濾器名稱關聯的所有div。 所以基本上我這里有一鍵功能。

jQuery(document).ready(function(e) {
    var t = $(".filter-container");
    t.imagesLoaded(function() {
        t.isotope({
            itemSelector: "figure",
            filter: "*",
            resizable: false,
            animationEngine: "jquery"
        })
    });
    $(".filter-buttons a").click(function() {
        var n = $(this).parents(".filter-buttons");
        n.find(".selected").removeClass("selected");
        $(this).addClass("selected");
        var r = $(this).attr("data-filter");
        t.isotope({
            filter: r
        });
        event.preventDefault()
    });
    $(window).resize(function() {
        var n = $(window).width();
        t.isotope("reLayout")
    }).trigger("resize")
});

這是適用於我的.filter-buttons的第二個腳本，它是一個下拉列表。 還有一個單擊事件作用於同一元素。

   function DropDown(el) {
            this.f = el;
            this.placeholder = this.f.children('span');
            this.opts = this.f.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.f.on('click', function(event){
                    $(this).toggleClass('active');
                    event.preventDefault()
                });

                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var f = new DropDown( $('#f') );

            $(document).click(function() {
                // all dropdowns
                $('.filter-buttons').removeClass('active');
            });

        });

我的問題是，如何確切地防止第一個腳本取消第二個腳本，反之亦然？ 我嘗試刪除“ return false”行，並嘗試更改腳本的順序，但沒有一個解決了該問題。 我曾考慮過合並它們，但說實話我不確定該如何完成或是否正確。

  <div id="f" class="filter-buttons" tabindex="1">
                        <span>Choose Genre</span>
                        <ul class="dropdown">
                            <li><a href="#" data-filter="*" class="selected">All</a></li>
                            <li><a href="#" data-filter=".electronic">Electronic</a></li>
                            <li><a href="#" data-filter=".popular">Popular</a></a></li>
                        </ul>
                    </div>

Answer 1

我認為您的jQuery出了點問題，我嘗試了代碼的簡化版本：

 $(document).ready(function() { $(".filter-buttons a").click(function() { alert("click 1"); event.preventDefault(); }); }); function DropDown(el) { this.f = el; this.placeholder = this.f.children('span'); this.opts = this.f.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.f.on('click', function(event){ alert("click 2"); $(this).toggleClass('active'); event.preventDefault() }); obj.opts.on('click',function(){ var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text(obj.val); }); }, getValue : function() { return this.val; }, getIndex : function() { return this.index; } } $(document).ready(function() { console.log($("#f"), $("#f").on); var f = new DropDown( $('#f') ); $(document).click(function() { // all dropdowns $('.filter-buttons').removeClass('active'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="f" class="filter-buttons" tabindex="1"> <span>Choose Genre</span> <ul class="dropdown"> <li><a href="#" data-filter="*" class="selected">All</a></li> <li><a href="#" data-filter=".electronic">Electronic</a></li> <li><a href="#" data-filter=".popular">Popular</a></li> </ul> </div> 

似乎有效，（按Run code snippet）。 但是，當我使用jQuery v1.6.4在jsfiddle上運行該代碼時，由於某些原因$("#f")不包含on函數，因此它obj.f.on('click', function(event){ ，因此obj.f.on('click', function(event){不會分配一個事件，而是產生一個錯誤Uncaught TypeError: undefined is not a function （我在Chrome）我試圖取代。 .on('click',用.click(而且似乎工作。因此，這可能意味着您在查看jQuery的.on()文檔（ http://api.jquery.com/on/ ）時需要jQuery的最新版本（v1.7或更高版本）：

從jQuery 1.7開始， .on()方法提供了附加事件處理程序所需的所有功能。

或改用.click() 。