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

但是我的控制台给了我以下错误，说事件未定义：

ReferenceError: 事件未定义

我之前使用过event.target 和event.which，但仅用于未命名的函数。

另外，我还有另一个类似的函数，我需要在其中传递event 和一个辅助布尔参数：

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

同样，我对如何传递参数感到困惑。

编辑：

我试图做的很快解释是让一个按钮打开一个弹出窗口。弹出窗口有两个按钮，一个用于关闭弹出窗口，一个用于将布局添加到页面并随后关闭。问题是我错误地调用了函数，而没有意识到我的解决方案不合逻辑。

感谢@Raibaz，我修复了点击事件。然后我将closeLayoutPopup 添加到addLayout 函数中，而不是合并它们：

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

我假设您想在单击具有my-class 类的元素时打开布局弹出窗口，因此您的代码应该是这样的：

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

在调用openLayoutPopup回调函数时，会将事件参数传递给函数。

您可以查看jQuery.on 的文档以供参考。

至于另一个函数，您可以使用自定义 CSS 类或数据属性来指示有一个打开的弹出窗口，而不是将第二个布尔参数传递给 click 事件处理程序，因此您的 openLayoutPopup 函数可以包含一些东西像这样：

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

在您的closeLayoutPopup 中，您可以检查该类是否存在以确定是否存在打开的弹出窗口，并最终在关闭弹出窗口时将其删除。