Jquery 从动态生成的文本元素获取val（）

好的，我有一些动态生成的文本框，在调用.val（）时找不到它们的值。在页面加载时呈现的文本输入将返回一个带有.val（）的值，但其余所有文本输入都不会返回

如果这个例子不足以得到答案，那么我将用我的实际代码编辑这个问题，但我已经尽了最大努力来精确地简化它

JQuery：

numBoxes = 0

function newText(){
  numBoxes++
  $('<div id="' + numBoxes + '"><input id="soft_text_' + numBoxes + 
    '" type="text"></div>').insertBefore($('button#new'))
}

function logHard(){
  console.log($('input#hard_text').val())
}

function logSoft(){
  $('div').each(function(){
    console.log($('input#soft_text_' + this.id).val())
  })
}

numBoxes=0
函数newText（）{
麻木牛++
$（''）.insertBefore（$（'button#new'））
}
函数logHard（）{
console.log（$（'input#hard_text'）.val（））
}
函数logSoft（）{
$（'div'）。每个（函数（）{
console.log（$（'input#soft_text.'+this.id）.val（））
})
}

HTML:

添加新文本框
日志第一个文本框
记录新文本框

您应该改进选择器。保持递增的ID通常表示您做错了什么

例如

function newText(){
  $('<div class="addedbox"><input type="text"></div>').insertBefore($('button#new'));
}
function logHard(){
  console.log($('input#hard_text').val());
}
function logSoft(){
  $('div.addedbox>input').each(function(){
    console.log($(this).val());
  })
}

函数newText（）{
$（''）.insertBefore（$（'button#new'）；
}
函数logHard（）{
console.log（$（'input#hard_text'）.val（））；
}
函数logSoft（）{
$（'div.addedbox>input'）。每个（函数（）{
log（$（this.val（））；
})
}

我就是这样解决这个问题的@Niet，你的建议是使用更好的选择器。我将致力于在将来使用不需要顺序识别的选择器，但这将使它在今天起作用

function logSoft(){
  $('div').each(function(){
    console.log($('div#' + this.id + ' > input').val())
  })
}

---

这可能是因为其中没有任何文本，“我已经尽了最大的努力来准确地简化它。”简化是好的，但它应该是一个好的选择。在本例中，由于它是基于浏览器的技术，因此使用堆栈片段（工具栏按钮）将其设置为可运行的MCVE。这可能是您需要的。您是否确实尝试了您的代码？它工作得很好：（因此，如果实际代码不工作，则不表示实际代码）“…动态生成的文本框…”。加载时呈现的文本框将返回..rest将不会..”听起来像是将事件绑定到尚不存在的元素的常见问题：谁说这解决了OPs问题？这可能是一个（很长的）评论。虽然我同意IDs有点狡猾，但这不太可能解决任何实际问题。谢谢你向我透露'>'。

function logSoft(){
  $('div').each(function(){
    console.log($('div#' + this.id + ' > input').val())
  })
}