在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 is not defined

我用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類或數據屬性表明，有一個開放的彈出窗口中的單擊事件處理程序，讓您的openLayoutPopup功能可以包含像這樣的：

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

，並在您closeLayoutPopup你可以只檢查類存在，以確定是否有打開的彈出窗口，並最終關閉彈出窗口時將其刪除。