无法访问由 .html() jQuery 函数编写的 HTML 输入框的值？答案

【问题标题】：Unable to access value of HTML Input box written by .html() jQuery function?无法访问由 .html() jQuery 函数编写的 HTML 输入框的值？
【发布时间】：2024-05-23 19:40:02
【问题描述】：

我在使用 jQuery 访问 HTML 输入元素的值时遇到问题，这个输入元素最初是使用早期函数中的 .html() 函数编写的。

这是我创建输入元素的代码 - 没有问题

<script type="text/javascript">
           $(document).ready(function() {
            $("#model").change(function()
                {                                
                 $.post("../includes/_ajaxSpecs.php",{ model:$(this).val() } ,function(data)
                 {
                var string = data;
                var partsArray = string.split(',');
                   $("#comp_specs").fadeTo(200,0.1,function() //start fading the messagebox
                   {
                    //add message and change the class of the box and start fading
                   $(this).html(partsArray[0]+"<input style='width:12em;margin-left:5px;border:1px solid #CCC;' name='input1' id='input1' /><br />"+partsArray[1]+"<input style='width:12em;margin-left:5px;border:1px solid #CCC;' name='input2' id='input2' /><br />").addClass('jText').fadeTo(900,1);
                     });
                  });
                });
              });
</script>

现在我想获取 #input1 中的值，并使用以下代码为该值设置一个不同的输入框 (#new_input)：

<script type="text/javascript">
$(document).ready(function() {
$("#input1").change(function()
        {
    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});

不知道为什么我不能在 #input1 和 #input2 中访问这些值，即使我可以在最后的 POST 中看到它们？ JQuery 访问由 .html() 函数编写的表单元素是否存在问题？我使用了很多列出的第二个函数，并且知道这适用于标准表单元素...

更新：这是我根据您的建议更新的代码，但仍然无法获取？

<script type="text/javascript">
$('#div1').on('change', '#input1', function() {
    $("#input1").change(function() {

    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});
</script>

更新：已解决，谢谢@Dragon

【问题讨论】：

您是在创建输入之前还是之后绑定 .change 事件？
更改事件发生在创建元素的初始函数之后

标签： javascript jquery

【解决方案1】：

您正在 $(document).ready 上调用 $("#input1") 上的更改，但尚未创建 $("#input1")。使用jQuery's on() function 将更改事件绑定到它，这样一旦它存在就会触发。

$(document).on("change", "#input1", function(event){
    var text = $("#input1").val(); 
    $("#new_input").val(text);   
});

【讨论】：

我认为这行不通，因为你会面临同样的问题——#input1 不存在，所以当你调用.on() 时，它什么也不做。 .live() 在这种情况下会起作用，但在 .on() 上已被弃用。
@dragon - 你刚刚回答了你自己的问题。从 jQuery 1.7 开始，.live() 被弃用，取而代之的是 .on()，您可以在 DOM 准备好后创建 input1 并绑定到它，就像我在示例中展示的那样。
@j086901 我了解，但是您对.on() 的使用与原始问题中使用的.click() 有何不同？如果在创建元素后附加处理程序，两者都会做同样的事情——但我相信这里不是这种情况。
@dragon - 我误解了你的意思。你是对的，这里使用 .on() 需要绑定到现有的文档元素。代码已更新。

【解决方案2】：

不，您的 jQuery 代码在页面加载时被执行。此时，#input1 和 #new_input 不存在。

你想要类似的东西

$('#containingDiv').on('change', '#input1') function()
{
}

或者在字段写入后注册 $('#input1').change() - 可能作为 $('#model').change 末尾的回调？

【讨论】：

小写你的函数但还是有帮助的，谢谢你的帮助！

【解决方案3】：

就像其他人指出的那样，您在创建事件处理程序之前将其绑定到“#input1”元素。在创建后将其绑定，或者将其绑定到以 '#input1' 作为上下文的文档。或者，您可以将其绑定到任何生命周期足够长的父元素，以查看绑定处理程序和调用它的完整周期。

$(document).ready(function() {
$(document).on('change', "#input1", function()
        {
    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});

就是这样。欲了解更多信息，http://api.jquery.com/on/

【讨论】：