jQuery无法从函数内动态创建的字段获取输入值
[英]jquery can't get input value from dynamically created field within a function
问题描述
“这有点奇怪，并且与我在论坛上可以找到的有所不同，但是当我使用jQuery时，我一次又一次遇到这个问题。
我有调用ajax并创建（成功）输入的代码，例如：
Start Date: <input type="text" id="gr_start_dt" size=10>
<button onclick="reassign_u();">Execute</button>
在HTML主体中，我有一个像这样的函数：
<script type="text/javascript" language="javascript">
function reassign_u()
{
alert($("#gr_start_dt").val());
}
</script>
这将提醒“未定义”。
如果我将ajax生成部分中的按钮更改为：
<button onclick="alert($('#gr_start_dt').val());">Execute</button>
它将提示该框的值。
我可以从函数外部获取值，但不能从函数内部获取值。
我在这里想念什么吗？ 我在使用jquery和使用ajax动态生成的页面时是否不了解某些范围？
我正在使用jquery 2.1.3和2.1.4，Firefox 39。
5 个解决方案
解决方案1
0 2015-08-06 02:29:07
我认为这是因为当javascript函数缓存到浏览器中时，元素$（“＃gr_start_dt”）尚未定义。 调用该函数将只调用在警报函数内具有未定义元素的已缓存函数。
那么为什么不这样做呢？
下面是html
Start Date: <input type="text" id="gr_start_dt" size=10>
<button onclick="reassign_u($('#gr_start_dt'));">Execute</button>
以下是javascript：
<script type="text/javascript" language="javascript">
function reassign_u(el)
{
alert($(el).val());
}
</script>
解决方案2
0 2015-08-07 18:21:41
删除该行： $("#invoice_detail_content").html(''); 从以下功能应该可以解决问题。 此行将删除有问题的文本框。
function reassign_user2() {
$("#action_menu_container").hide();
$("#invoice_detail_content").html(''); //<== REMOVE THIS
$("#invoice_detail").show();
$("#loading").show();
console.log($("#group_start_dt"));
alert($("#group_start_dt").val());
$.ajax({
url: "fetch.php",
cache: false,
method: "POST",
data: {
action: 'reassign_group',
parameters: JSON.stringify(parameters)
}
})
.done(function(result) {
$("#loading").hide();
result = result.trim();
if(result)
{
$("#invoice_detail_content").html(result);
}
else
{
$("#invoice_detail").hide();
show_invoices($("#invoice_status_select").val());
}
})
.fail(function( jqXHR, textStatus ) {
$("#loading").hide();
alert( "Request failed: " + textStatus );
});
}
解决方案3
0 2017-07-10 00:43:09
所以我对此有点怀疑，所以希望我不会被否决:(尽管我相信我已经回答了这个问题。
当在第一页加载中创建DOM树时，所有javascript事件均绑定到其所有相应元素，因此您的.val（）不会附加到任何动态生成的元素，但是，我注意到的一件事是如果您使用该动态创建的元素动态添加一些javascript，它将立即运行其绑定过程，然后仍然运行，这是通过将alert（$（element）.val（））直接直接动态放置而完成的操作生成的元素。
希望这对您有帮助，即使没有人在场。 我意识到答案有点晚了。
解决方案4
-1 2015-08-06 02:28:25
我敢肯定，使用JQuery / AJAX创建事物仍然会导致它进入DOM，这意味着可以使用$('selector')获得它。 因此，它应该和平常一样简单。
我用了：
<script>
function on_clicked() {
alert($("#text_input").val());
}
</script>
<input type="text" id="text_input" size=10>
<button onclick="on_clicked();">Execute</button>
在这里工作的JSFiddle。
我发现您必须在将函数设置为onclick属性之前对其进行声明。 有道理。 否则，我看不到任何其他大问题。
更新资料
现在，我使“ <form>元素“异步”（我使用超时来模拟AJAX。只要在范围之前和范围内声明了回调，它就可以正常工作。
我已尽我所能复制了您的发言，但仍然有效。
解决方案5
-1 2015-08-06 02:33:21
这个对我有用。 可能是您应该将js函数放在进行AJAX调用的文件中。
这是代码
index.php
<head>
function doSomeTheing() {
$.ajax({
url: 'test01.php',
success: function (mydata) {
$('#container').html(mydata);
}
});
}
function reassign_u()
{
alert($("#gr_start_dt").val());
}
</head>
<body>
<input type="button" id="abc" onclick="doSomeTheing()" value="test">
<div id="container">
</div>
</body>
test.php包含
<?php
echo 'Start Date: <input type="text" id="gr_start_dt" size=10>
<button onclick="reassign_u();">Execute</button>';
如何从通过 Javascript function 动态创建的输入字段访问表单输入？
[英]How can I access form input from an input field which was created dynamically via a Javascript function?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.