jQueryカスタム関数でイベントを使用する

Question

私はポップアップシステムを作っていますが、カスタム機能の属性としてeventを使用することに問題があります。ここに私のコードです：

var openLayoutPopup = function(event){ 
    event.preventDefault(); 
    var target = $(event.target); 
    var flexible_field = target.closest('.acf-field-flexible-content').attr('data-key'); 
    var popup = $('.'+flexible_field); 
    var overlay = $('.bbh-popup-overlay'); 

    popup.addClass('open').fadeIn(); 
    overlay.fadeIn(); 

} 

$('.my-class').click(openLayoutPopup(event)); 

しかし、私のコンソールでは、イベントが定義されていないと言って私に次のエラーを与える：私はだけ無名の機能のため、前とevent.whichevent.targetを使用しました

ReferenceError: event is not defined

。同様に、私は1つのパラメータを渡す方法については困惑している

function closeLayoutPopup(event, openLayout){ 
    event.preventDefault(); 

    var popup = $(event.target).closest('.bbh-popup'); 
    var overlay = $('.bbh-popup-overlay'); 

    popup.removeClass('open').fadeOut(); 
    overlay.fadeOut(); 
    if(open == true){ 
     var dataLayout = target.attr('data-layout'); 

     acf.fields.flexible_content.add(dataLayout); 
    } 
} 

：

はまた、私はeventと二次ブール・パラメータを渡す必要がある別の同様の機能を持っています。

EDIT：ボタンがポップアップを開く持っている私はすぐに説明しないしようとしていた何

。ポップアップには2つのボタンがあり、1つはポップアップを閉じ、もう1つはレイアウトをページに追加してから閉じることができます。問題は機能を間違って呼び出すことであり、私の解決策が非合理的であることを認識していなかった。

@Raibazのおかげでクリックイベントが修正されました。私はあなたがmy-classクラスを持つ要素をクリックすると、レイアウトポップアップを開きたいと仮定していますので、あなたのコードは次のようなものでなければなりません

/*============================================== 
=   Function - Close popup   = 
==============================================*/ 
function closeLayoutPopup(event){ 
    event.preventDefault(); 
    var popup = $(event.target).closest('.bbh-popup'); 
    var overlay = $('.bbh-popup-overlay'); 

    popup.removeClass('open').fadeOut(); 
    overlay.fadeOut(); 
} 

/*============================================= 
=   Function - Open popup   = 
=============================================*/ 
var openLayoutPopup = function(event){ 
    event.preventDefault(); 
    var target = $(event.target); 
    var flexible_field = target.closest('.acf-field-flexible-content').attr('data-key'); 
    var popup = $('.'+flexible_field); 
    var overlay = $('.bbh-popup-overlay'); 

    popup.addClass('open').fadeIn(); 
    overlay.fadeIn(); 

} 

/*============================================= 
=   Function - Add Layout   = 
=============================================*/ 
var addLayout = function(event){ 
    event.preventDefault(); 
    var target = $(event.target); 
    var dataLayout = target.attr('data-layout');     

    acf.fields.flexible_content.add(dataLayout); 
    closeLayoutPopup(); 
} 

/*---------- add section click - open popup ----------*/ 
$('.acf-field-flexible-content .acf-flexible-content > .acf-actions a.acf-button').on('click',openLayoutPopup);  

/*---------- Close button click ----------*/ 
$('.layout-picker-close').on('click', closeLayoutPopup); 

/*---------- Add layout ----------*/ 
$('.bbh-popup a.add-layout-button').on('click', addLayout); 

Answer 1

：その後、私が代わりにそれらを組み合わせるaddLayout機能にcloseLayoutPopupに追加しました

$('.my-class').on('click', openLayoutPopup); 

イベントパラメータは、openLayoutPopupコールバック関数を呼び出すときに関数に渡されます。

参照のためにjQuery.onのドキュメントをご覧ください。

もう1つのブール型パラメータをclickイベントハンドラに渡す代わりに、カスタムCSSクラスまたはデータ属性を使用してポップアップが開いていることを示すことができるので、openLayoutPopup関数にはこの：

$('body').addClass('has-popup') 

とクラスが開いたポップアップがあるかどうかを判断し、最終的にポップアップを閉じるときにそれを取り除くために存在している場合は、あなたのcloseLayoutPopupあなただけチェックすることができインチ