Javascript 羽毛灯灯箱中的呼叫按钮

这是我的后续问题

我已经成功地解决了打开灯箱的问题，但是我添加了一个提交按钮，我希望在单击时调用该按钮（“提交”，函数）

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

jQuery（document）.ready（function（）{
//单击预览按钮时触发。
jQuery（'.OpenLightBox'）。关闭（'click'）。打开（'click'，函数（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==“”）{
警报（'不能为空'）；
返回false；
}否则{
var content='Ajax中的名字是'+pa_firstname+'，Ajax中的姓氏是'+pa_lastname+'Send NowBack'；
jQuery（'#preview'）.html（“”）；
jQuery（'#preview'）.html（内容）；
featherlight（'#preview'，{}）；
}
});
//增加了检测点击的功能。LightBoxSubmit是lightbox中调用提交事件的按钮，它将触发下面的功能。
jQuery（“.LightBoxSubmit”）.off（'click'）.on（'click'，函数（e）{
document.getElementById（“pd_测试”）.submit（）；
警报（“调用LightBoxSubmit”）；
});
//单击LightBoxSubmit按钮后，将调用此函数，以便Ajax（为了简单起见，我删除了代码）事件可以处理$\u POST数据。
jQuery（'#pd_test'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
警报（'称为提交'）
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==“”）{
警报（'不能为空'）；
}否则
警报（“提交的表格”）；
console.log（pa_firstname）；
});
返回false；
})

---

问题：我无法使用提交按钮关闭灯箱并提交表单。它没有检测到打开（“单击”）事件。

您非常接近，但需要执行以下操作：

// 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();      
   });

---

演示：

如果可能，请创建一把小提琴。是的，我更新了以前的小提琴，请查看此链接是的，它现在可以工作了！但是，它不接受表单字段的值，在调用表单提交时，pa_firstname和pa_lastname为空。请检查您的代码。span和输入框都具有相同的ID

“pa-name\u first”

。这也是错误的：

var pa_firstname=jQuery（'input[name=“pa-[name_first]”）.val（）直接选择ID为
var pa_firstname=jQuery（'#pa-name_first'）.val（）的元素即可