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

同样地,我对如何传递那个参数感到困惑.

编辑:

我试图做的不久就是按一个按钮打开一个弹出窗口.Popup有两个按钮,一个用于关闭弹出窗口,另一个用于向页面添加布局并在之后关闭.问题是我称函数错误,并没有意识到我的解决方案是不合逻辑的.

由于@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回调函数时,event参数将传递给函数.

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

至于其他函数,不是将第二个布尔参数传递给click事件处理程序,而是可以使用自定义CSS类或数据属性来指示存在打开的弹出窗口,因此您的openLayoutPopup函数可能包含以下内容:

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

在你的工作中closeLayoutPopup你可以检查是否存在类以确定是否存在打开的弹出窗口,并在关闭弹出窗口时最终将其删除.