Using event in jQuery custom function

Question

I'm making a popup system and I'm having some issues with using event as an attribute in my custom function. Here is my 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));

But my console gives me the following error saying event isn't defined:

ReferenceError: event is not defined

I've used event.target before and event.which, but only for unnamed functions.

Additionally, I have another similar function, in which I need to pass event and a secondary boolean parameter:

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

Similarly I'm confused about how to pass the parameters in that one.

EDIT:

What I was trying to do explained shortly is having a button open a popup. Popup has two buttons, one to close popup and one to add layout to page and close afterwards. Issue was me calling functions wrong, and not realizing my solution was illogical.

I fixed the click events thanks to @Raibaz. Then I added to closeLayoutPopup to the addLayout function instead of combining them:

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

• Shawn K: what is this? $('.my-class(openLayoutPopup(event)); typo??? I'm not sure what you're intending there.
• Emil Østervig: @Kosch Yeah that was typo of the year. I was deleting a really long selector and went a bit triggerhappy with the backspace button. It's back to normal now. @t.niese if I pass event as a parameter on the click event for '.my-class' I get the error for that line. If I don't pass anything I get the error in the first line of the function event.preventdefault()

Answer 1

I'm assuming you want to open the layout popup when clicking on elements with the my-class class, so your code should be something like this:

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

The event parameter will be passed to the function when invoking the openLayoutPopup callback function.

You can have a look at the documentation for jQuery.on for reference.

As for the other function, instead of passing a second boolean parameter to the click event handler you could use a custom CSS class or a data attribute to indicate that there is an open popup, so your openLayoutPopup function could contain something like this:

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

and in your closeLayoutPopup you could just check if the class is present to determine if there is an open popup, and eventually remove it when closing the popup.

• Emil Østervig: I feel like I tried your first example, but obviously I messed it up. Probably did it as on('click', myFunction(event)). But it works perfectly, thank you! Regarding the other option I realize I have absolutely no need for the second parameter, as I can run the closePopup function from the function doing all the other stuff, which was what I was trying to differentiate. Closing the popup with an action or without an action.