如何使用 jquery.on() 获取其他字段值

Question

我有一个简单的问题，但我在任何地方都找不到如何做到这一点。我已经阅读了jquery文档，但没有关于这方面的信息。

我有一个带有生成字段的表，一行是一对文本和按钮元素。

<input type="text" class="input-text" value="10">
<input type="button" class="input-button">

我想在单击按钮时从文本字段中获取值。由于它们是生成的，所以我必须使用 .on（） 函数。

$('#input-here').on('click', '.input-button', function(event) {
   var value = $('.input-text').val();
   alert(value);
   return false;
});

我可以获取值，但只能从文本字段的第一行获取。如果行 #1 是"10"，行 #2 是"20"，如果我单击其他行中的按钮，警报只会显示"10"。

有什么方法可以让我正确获取值吗？

Answer 1

你可以使用 jQuery 的 prev() 方法来拉取前面的元素：

var value = $(this).prev().val();

给定一个表示一组 DOM 元素的 jQuery 对象，.prev() 方法在 DOM 树中搜索每个元素的前置元素，并从匹配的元素构造一个新的 jQuery 对象。

---

嗨，我刚刚尝试过这个。我得到了"未定义"

问题中提供的标记必须与您在页面上使用的标记不同。这是一个演示，显示了它的工作原理：

$('body').on('click', '.input-button', function(event) {
   var value = $(this).prev().val();
   alert(value);
   return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="text" class="input-text" value="Foo">
  <input type="button" class="input-button">
</div>
<div>
  <input type="text" class="input-text" value="Bar">
  <input type="button" class="input-button">
</div>

Answer 2

您可以使用prev()函数来获取前一个元素。假设您的标记与问题中一样。

$('#input-here').on('click', '.input-button', function(event) {
   var value = $(this).prev('.input-text').val();
   alert(value);
   return false;
});

Answer 3

试试这个

$('#input-here').on('click', '.input-button', function(event) {
   var value = $(this).closest('input').find('.input-text').val();
   alert(value);
   return false;
});

你的问题是你有多个这样的输入

<input type="text" class="input-text" value="10">
<input type="button" class="input-button">

因此，如果您进行$('.input-text')它将获得所有输入元素，.val()将获得第一个元素的值，这就是为什么您每次都获得相同的值。

Answer 4

谢谢大家的代码，我已经尝试了所有代码，但我从所有这些代码中得到了"未定义"。

来自 @Anto Subash 的代码启发我获得此解决方案。

var value = $(this).parent().find('.input-text').val();