Featherlight 灯箱中的呼叫按钮

Question

这是

的跟进问题

我已经成功解决了打开灯箱的问题，但我添加了一个提交按钮，我希望在单击时调用它('submit',function)。

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/

Featherlight 灯箱中的呼叫按钮

Calling Button in Featherlight Lightbox

javascript

jquery

html

ajax

lightbox