在羽之燈箱呼叫按鈕

Question

這是Featherlight hide div on Close

我已經成功地解決了打開收藏夾問題的後續問題，但我已經添加了一個提交按鈕，我想呼籲（「提交」，函數）點擊時。

jQuery(document).ready(function() {  
//Triggle when Preview Button is Clicked. 
jQuery('.OpenLightBox').off('click').on('click', function(e) { 

    var pa_firstname= jQuery('input[name="pa-name_first"]').val(); 
    var pa_lastname= jQuery('input[name="pa-name_last"]').val(); 
    if (pa_firstname == null || pa_firstname == '') { 
     alert('Cannot be empty'); 
     return false; 
    } else { 
     var content = '<div style="width: 200px; height: 300px;"><b>First Name in Ajax is </b>' + pa_firstname + ' <b>And Last Name in Ajax is ' + pa_lastname + '</b><button type="button" value="submit" class="LightBoxSubmit">Send Now</button><button type="button" value="back">Back</button></div>'; 
     jQuery('#preview').html(""); 
     jQuery('#preview').html(content); 
     jQuery.featherlight('#preview', {}); 
    } 
}); 

//Added function that detects click on .LightBoxSubmit which is a button in the lightbox to call a Submit event, which will trigger the function below. 
    jQuery(".LightBoxSubmit").off('click').on('click',function(e) { 
    document.getElementById("pd_test").submit(); 
    alert('LightBoxSubmit Called'); 

    }); 

//Once LightBoxSubmit button is clicked, this function is suppose to call so the Ajax (I removed the code for simplicity) event can process the $_POST data. 

jQuery('#pd_test').on('submit',function(event) { 
    event.preventDefault(); 
alert('Called Submit') 
    var pa_firstname= jQuery('input[name="pa-[name_first]"]').val(); 
    var pa_lastname= jQuery('input[name="pa-[name_last]"]').val(); 
if (pa_firstname == null || pa_firstname == '') { 
    alert('Cannot be empty'); 
} else 
    alert('Form Submitted'); 

console.log (pa_firstname); 




}); 
return false; 
}) 

問題：我無法提交按鈕，關閉燈箱，並提交表單。它不檢測on（'click'）事件。

Answer 1

你是相當接近，但你需要做到以下幾點：

// We first gave that dynamically generated button an id "submitformbtn". Since your button is dynamically generated, we select it as follows: 
    $(document).on('click', '#submitformbtn', function(){  
// This is the method to close current featherlight : 
     $.featherlight.current().close(); 
// Then we submit the form 
     jQuery('#pd_test').submit();  
    }); 

演示：https://jsfiddle.net/rdawkins/vvvo5ays/2/