jqueryプラグインonclickを自動的にトリガーする

Question

ボタンをクリックすると、非表示のdivとアニメーションを表示するjqueryプラグインがあります。私はjquery.fnプロトタイプを使用しました。

これは私の関心は、私がするときの間隔や状態に自動的にそれをトリガーにしたいです

$("#proactive-chat").click().launchBtn({ 
        openDuration: 250, 
        closeDuration: 300 
       }); 

）jQueryプラグイン

(function($) { 
      'use strict'; 
      $.fn.launchBtn = function(options) { 
       var mainBtn, panel, clicks, settings, launchPanelAnim, closePanelAnim, openPanel, boxClick, panelBody, panelMedia; 
       mainBtn = $(".proactive-chat-button"); 
       panel = $("#proactive-chat .panel"); 
       panelMedia = $("#proactive-chat .panel-media"); 
       panelBody = $("#proactive-chat .panel-body"); 
       clicks = 0; 
       //default settings 
       settings = $.extend({ 
        openDuration: 600, 
        closeDuration: 200, 
        rotate: true 
       }, options); 
       //Open panel animation 
       launchPanelAnim = function() { 
        $(panel).removeClass('swift-out'); 
        $(panelMedia).removeClass('swift-out'); 
        $(panelBody).removeClass('swift-out'); 
        panel.animate({ 
        opacity: "show", 
        width: "show", 
        height: "show", 
        }, settings.openDuration); 
        $(panel).addClass('swift-in'); 
        $(panelMedia).addClass('swift-in'); 
        $(panelBody).addClass('swift-in'); 
        panelMedia.animate({ 
        opacity: "show", 
        width: "slideDown", 
        height: "slideDown", 
        transitionDelay: "0.1s" 
        }, settings.openDuration); 

        calculate(); 
        $('.proactive-chat-button').addClass('shadow-3'); 

       }; 
       //Close panel animation 
       closePanelAnim = function() { 
        $(panel).removeClass('swift-in'); 
        $(panelMedia).removeClass('swift-in'); 
        $(panelBody).removeClass('swift-in'); 
        $(panel).addClass('swift-out'); 
        $(panelMedia).addClass('swift-out'); 
        $(panelBody).addClass('swift-out'); 
        panel.animate({ 
        opacity: "hide", 
        width: "hide", 
        height: "hide" 
        }, settings.closeDuration); 
        panelMedia.animate({ 
        opacity: "hide", 
        width: "slideDown", 
        height: "slideDown", 
        transitionDelay: "0.02s" 
        }, settings.openDuration); 
        $('.proactive-chat-button').removeClass('shadow-3'); 
        $('.modal-overlay').fadeOut(100); 
       }; 
       //Open panel and rotate icon 
       openPanel = function(e) { 
        if (clicks === 0) { 
        if (settings.rotate) { 
         // $('.proactive-chat-icon').removeClass('rotateBackward').toggleClass('rotateForward'); 
        } 
        launchPanelAnim(); 
        clicks++; 
        } else { 
        if (settings.rotate) { 
         //$('.proactive-chat-icon').removeClass('rotateForward').toggleClass('rotateBackward'); 
        } 
        closePanelAnim(); 
        clicks--; 
        } 
        e.preventDefault(); 
        return false; 
       }; 
       //Allow clicking in panel 
       boxClick = function(e) { 
        e.stopPropagation(); 
       }; 
       //Main button click  
       mainBtn.on('click', openPanel); 
       //Prevent closing panel when clicking inside 
       panel.click(boxClick); 
       $('.proactive-chat-icon').click(function() { 
        $('.proactive-chat-icon .procty').toggleClass('proactive-procty-close').toggleClass('proactive-procty'); 
       }); 
       $('.panel-heading-button').click(function() { 
        if (clicks === 0) { 
        if (settings.rotate) { 
         // $('.proactive-chat-icon').removeClass('rotateBackward').toggleClass('rotateForward'); 
         $('.proactive-chat-icon .procty').toggleClass('proactive-procty-close').toggleClass('proactive-procty'); 
        } 
        launchPanelAnim(); 
        clicks++; 
        } else { 
        if (settings.rotate) { 
         //$('.proactive-chat-icon').removeClass('rotateForward').toggleClass('rotateBackward'); 
         $('.proactive-chat-icon .procty').toggleClass('proactive-procty').toggleClass('proactive-procty-close'); 
        } 
        closePanelAnim(); 
        clicks--; 
        } 
       }); 
       $(document).click(function() { 
        closePanelAnim(); 
        if (clicks === 1) { 
        $('.proactive-chat-icon .procty').toggleClass('proactive-procty').toggleClass('proactive-procty-close'); 

        } 
        clicks = 0; 
       }); 
      }; 
     }(jQuery)); 

と私は方法launchBtn（と呼ばれてきたことを使用することです満たされる。私は$（ '#proactive-chat'）を使っていますが、trigger（ 'click'）は動作しません。自動的にトリガーできる方法はありますか？前もって感謝します。

Answer 1

.click()は、jQueryオブジェクトを返すため、関数はclickイベントで呼び出されません。あなたはそれをクリック時に起動するようにしたい場合は、そのようclick()にパラメータとしてハンドラ関数を追加する必要があります。.trigger('click')は動作するはずです。この形式では

$("#proactive-chat").click(function(){ 
    $(this).launchBtn({ 
     openDuration: 250, 
     closeDuration: 300 
    }); 
}); 

、あなたが$.fnを使用する理由私はかなり理解していないものの、プラグインのどこにでもthisを参照していない場合は、プロトタイプを作成してください。これは単純な機能でした。