I'm new to jQuery and am struggling to figure out an issue that's plaguing me.
In my code, I am appending a new form after a DIV, and have set up a custom button for submission. I set up an on-click jQuery event, but am having trouble accessing one of the local variables successfully.
....
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>');
});
}
}
...
This is all embedded in a callback from a Magnific Popup button, in which a user clicks a button within the popup and the above is triggered. In my code, I am setting the global destination
variable with the code;
destination=$("#emailShare").val();
Just before my AJAX call, I am logging the state of destination
, with successfully reports the proper user input of the #emailShare
text field. I am logging like so;
console.log("About to send mail to " + destination)
Both before the call, and in the response, I am successfully logging the proper variable. But the actual variable being sent to the API is still the global variable, having never been updated.
I recognize this is complex, but I"m unsure if there's a better way...