Ajax：如何获取具有动态生成 ID 的元素的值 [重复]

Question

我有一大段用 PHP 生成的 HTML 代码。

HTML 看起来像这样：

<input type="text" id="10"><button onclick="process()">send</button>

<input type="text" id="11"><button onclick="process()">send</button> <!-- and so on until id=N -->

PHP 代码如下：

<?php while ($row = $result->fetch_assoc()) { ?>
<input type="text" id="<?=$row['id']?>">
<button onclick="process()">send</button>
<br>
<?php } ?>

假设用户点击SEND按钮，input标签的值被传递给process()函数。

这就是我卡住的地方：我不知道我应该在 process() 函数中的 getElementById 中指定哪个确切的输入 ID - 因为我不知道按下了哪个按钮。

如果有任何帮助将不胜感激。

Answer 1

与之前的答案一样，理想情况下，您应该远离内联绑定事件。但是如果你必须做的解决方案是两个，默认情况下一个事件对象被传递给事件处理方法，如果它没有被任何一个覆盖。

这样的方法将为您提供有关事件目标元素的足够信息。 （行为可能因浏览器而异，因此可能需要彻底测试..）

function EventHandler(e) {
    e = e || window.event; 
    var target = e.target || e.srcElement;
    console.log(target);
}

现在你可以通过target.id来调用get id，或者你基本上可以得到任何属性值。

Answer 2

虽然不是首选方式，但如果你想坚持使用内联事件处理程序，你可以这样做：

function process(elem){
  alert(elem.previousSibling.value);
  
}

<input type="text" id="10"><button onclick="process(this)">send</button>
  <input type="text" id="11"><button onclick="process(this)">send</button>

注意这一点

基于 Gecko 的浏览器将文本节点插入到文档中以表示 源标记中的空格。因此得到一个节点，对于 例如，使用 Node.firstChild 或 Node.previousSibling 可能指的是 空白文本节点而不是作者的实际元素 打算得到。

previousSibling