Verwenden von Ereignis in jQuery benutzerdefinierte Funktion

Question

Ich mache ein Popup-System und ich habe einige Probleme mit der Verwendung von event als Attribut in meiner benutzerdefinierten Funktion. Hier ist mein Code:

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)); 

Aber meine Konsole gibt mir die folgende Fehlermeldung, Ereignis nicht definiert ist:

ReferenceError: event is not defined

ich verwendet habe event.target vor und event.which, aber nur für unbenannte Funktionen.

Zusätzlich habe ich eine ähnliche Funktion, in denen ich brauche event und einen sekundären boolean Parameter zu übergeben:

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); 
    } 
} 

Ähnlich über Ich bin verwirrt, wie die Parameter in diesem einen zu übergeben.

EDIT:

Was ich versuchte, kurz zu tun erklärt eine Taste ein Popup geöffnet wird müssen. Popup hat zwei Knöpfe, einen zum Schließen des Popups und einen zum Hinzufügen des Layouts zur Seite und zum Schließen danach. Problem war, dass ich Funktionen falsch nannte, und meine Lösung nicht zu erkennen, war unlogisch.

Ich habe die Click-Ereignisse dank @Raibaz behoben. Dann habe ich zu closeLayoutPopup auf die addLayout Funktion, anstatt sie zu kombinieren:

/*============================================== 
=   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

Ich gehe davon aus Sie das Layout Popup geöffnet werden sollen, wenn auf Elemente mit der my-class Klasse klicken, so dass Ihr Code in etwa so sein sollte:

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

der Ereignisparameter wird an die Funktion übergeben werden, wenn die openLayoutPopup Callback-Funktion aufgerufen wird.

Sie können sich die Dokumentation für jQuery.on als Referenz ansehen. Wie bei der anderen Funktion können Sie, anstatt einen zweiten booleschen Parameter an den click-Ereignishandler zu übergeben, eine benutzerdefinierte CSS-Klasse oder ein Datenattribut verwenden, um anzuzeigen, dass ein Popup geöffnet ist. Ihre openLayoutPopup-Funktion könnte also etwas enthalten dies:

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

und in Ihrem closeLayoutPopup Sie könnten nur prüfen, ob die Klasse vorhanden ist, um zu bestimmen, ob es ein offenes Popup ist, und es schließlich entfernen, wenn das Popup zu schließen.