Question

我是jQuery的新手，正在努力找出困扰我的问题。

在我的代码中，我在DIV之后添加了一个新表单，并设置了一个自定义按钮以供提交。我设置了一个on-click jQuery事件，但是无法成功访问其中一个局部变量。

....
callbacks {
  open function() {
    this.wrap.on('click.pinhandler' .socialLink', function(e) {
var fileName = $(this).attr('fileName');
var eventName = $(this).attr('eventName');
var destination = "test@test.com";
$(".test-area").after('<input type="email" id="emailShare" placeholder="enter your email">
<div id="btnSubmit"><div id="btnLabel">GO</div>
<script>
$("#btnSubmitA").on("click", 
  function(event) { 
    destination=$("#emailShare").val();
    console.log("About to send mail: " + destination); 
    $.ajax({
      type: "GET",
      url: "https://myURL/api.php?fileName=' +fileName+ '&eventName=' +eventName+ '&destination=' +destination+ '",
      headers: { "Access-Control-Allow-Origin": "https://babelandphoto.com/babeconnect/getShortcode.php" },
      cache: false,
      success: function(data) { 
        console.log("Response:" + data["status"] + this.destination)
      }
    }); 
   });
   </script>');
  });
 }
}
...

这些都嵌入在来自 Magnific Popup 按钮的回调中，其中用户单击弹出窗口中的按钮并触发上述按钮。在我的代码中，我使用代码设置全局destination变量;

destination=$("#emailShare").val();

在我的AJAX调用之前，我正在记录destination的状态，并成功报告了#emailShare文本字段的正确用户输入。我是这样记录的;

console.log("About to send mail to " + destination)

在调用之前和响应中，我都成功记录了正确的变量。但是发送给API的实际变量仍然是全局变量，从未更新过。

我认识到这很复杂，但我不确定是否有更好的方法......

Answer 1

对于任何偶然发现这一点的人来说，@ taplar在上述问题中的评论让我走上了正确的道路。具体而言，this Stackoverflow post讨论了如何绑定到动态创建的元素。

通过重构我的代码，我最终使用了以下内容;

$(document).on('click', '.doSocial', function(){
  //stuff happens here
});

就我而言，.doSocial是一个应用于动态创建按钮的类。用户点击.doSocial按钮后，我会使用//do stuff here部分添加我的其他动态HTML元素，包括现在由我的AJAX函数识别的表单字段。如果@taplar想回答，我会高兴地将其标记为正确。

AJAX函数不尊重局部变量或全局变量

1 个答案: