Javascript 在jQuery自定义函数中使用事件

我正在制作一个弹出式系统，在自定义函数中将

事件

用作属性时遇到了一些问题。这是我的密码：

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

，但仅用于未命名的函数

此外，我还有另一个类似的函数，其中我需要传递

事件

和一个辅助布尔参数：

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

---

我假设您希望在使用

my class

类单击元素时打开布局弹出窗口，因此您的代码应该如下所示：

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

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

调用

openLayoutPopup

回调函数时，事件参数将传递给函数

您可以查看文档以供参考

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

openLayoutPopup

函数可以包含如下内容：

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

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

---

在您的

closeLayoutPopup

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

这是什么$（'.my类（openLayoutPopup（事件））；打字错误？？？我不确定你打算在那里做什么。@Kosch是的，那是今年的打字错误。我删除了一个很长的选择器，并对backspace按钮感到有点兴奋。它现在恢复正常了。@t.niese如果我将

事件

作为参数传递给

的click事件。我的类“

我会得到该行的错误。如果我不要传递任何信息。我在函数

event.preventdefault（）

的第一行中得到了错误。我感觉我尝试了您的第一个示例，但显然我弄糟了。可能是因为（'click'，myFunction（event））上出现了

。但它工作得很好，谢谢！关于另一个选项，我意识到我完全不需要第二个参数，因为我可以从执行所有其他操作的函数运行closePopup函数，这正是我试图区分的。使用操作或不使用操作关闭弹出窗口。