使用 FeatherLight 打开后无法更改/获取输入值?
Can't change / get value of input after being opened with FeatherLight?
我遇到了一个奇怪的行为。我正在尝试获取/设置输入文本框的值 After FeatherLight 灯箱关闭。我在尝试获取文本框的值时得到 "Undefined"(同样,在通过 Featherlight 打开和关闭文本框之后)。你可以在这里看到我的源代码:
https://jsfiddle.net/hgyba4dg/
唯一相关的部分是 html 代码。尝试 运行 JSFiddle 上的代码并查看输入的值(文本框的值)。关闭 Featherlightbox 后,您会看到 "undefined"。这是 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>
第一次后,DOM 元素保持分离(有一天我打开重新插入它......)。所以 $('#MyTextBox')
之后将不起作用。要么保留对它的引用,要么使用 storeData.$content.find('#MyTextBox')
我遇到了一个奇怪的行为。我正在尝试获取/设置输入文本框的值 After FeatherLight 灯箱关闭。我在尝试获取文本框的值时得到 "Undefined"(同样,在通过 Featherlight 打开和关闭文本框之后)。你可以在这里看到我的源代码:
https://jsfiddle.net/hgyba4dg/
唯一相关的部分是 html 代码。尝试 运行 JSFiddle 上的代码并查看输入的值(文本框的值)。关闭 Featherlightbox 后,您会看到 "undefined"。这是 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>
第一次后,DOM 元素保持分离(有一天我打开重新插入它......)。所以 $('#MyTextBox')
之后将不起作用。要么保留对它的引用,要么使用 storeData.$content.find('#MyTextBox')