Can't change / get value of input after being

2019-08-18 01:54发布

I've met a weird behavior. I'm trying to get / set the value of an input textbox After FeatherLight lightbox is closed. I get "Undefined" when trying to fetch the value of the textbox (again, after it was opened and closed via Featherlight). You can see my source code here:

https://jsfiddle.net/hgyba4dg/

The only relevant part is the html code. try running the code on JSFiddle and see the input's value (the textbox's value). You'll see that you'll get "undefined" after closing the Featherlightbox. Here is the html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var storeData = null;

function openFeatherLight()
 {
  if (!storeData)
   {
    storeData = $.featherlight($('#MyDiv'), { 'persist' : true , 'beforeOpen' : sayHi , 'beforeClose' : sayBye, 'afterClose' : changeInputValueAfterClose });
   }
  else
   {
    storeData.open();
   }  
 }

function sayHi()
 {
  alert('Value of textbox BEFORE opening FeatherLight LightBox Is: ' + $('#MyTextBox').val());
 }

function sayBye()
 {
  alert('Value of textbox BEFORE CLOSING the FeatherLight LightBox Is: ' + $('#MyTextBox').val());
 }

function changeInputValueAfterClose()
 {
  $('#MyTextBox').val("Bla");
  alert('Current Value Of Input TextBox After Change is: ' + $('#MyTextBox').val());
  alert('We get "Undefined". Why?');
 }

</script>
</head>
<body>
<div id="Shit" style="display: none;">
<div id="MyDiv">
Text
<form id="MyForm">
<input type="text" value="Initial_Value_Set_By_Me_For_Testings" id="MyTextBox">
</form>
</div>
</div>
<input name="Button1" type="button" value="Open FeatherLight" class="AddToMenuButton" onclick="openFeatherLight();">
</body>
</html>

1条回答
走好不送
2楼-- · 2019-08-18 02:39

After the first time, the DOM elements remain detached (I open to reinsert it one day...). So $('#MyTextBox') won't work afterwards. Either keep a reference to it, or use storeData.$content.find('#MyTextBox')

查看更多
登录 后发表回答