jQuery动态ID元素绑定click事件无法正确获取域名值问题

需求为点击表格行内的保存图标时，在控制台打印当前行对应的域名。现有代码静态值测试运行正常，确认问题和动态生成的ID相关：打印截取得到的id值输出正常，但始终无法正确获取到对应的domain值。

涉及的原代码如下：

<?php
// 后端渲染表格行逻辑
$dns_zone = ["domain" => "user", "domain2" => "user2"];
foreach ($dns_zone as $dom => $user){
 echo '
<tr id="tr'.$dom.'">
<td>
    <span>'.$dom.'</span>
    <input type="hidden" id="name'.$dom.'" name="domain" value="'.$dom.'" />
</td>
<td>
    <i class="save" id="sid'.$dom.'" title="Save"></i>
</td>   
</tr>';
}
?>

// 前端保存点击逻辑
$(document).on("click", ".save", function() {
  var id = $(this).attr("id");
  id = id.substr(3);
  var domain = $("#name"+id).val();
  console.log(domain);
});

你踩了jQuery选择器的语法解析坑：域名通常包含.这类选择器元字符，当你拼接出的选择器为#namexxx.com格式时，jQuery不会把xxx.com当成完整ID，而是会把.com解析为class筛选条件，实际匹配的是「id为namexxx、同时带有com类名的元素」，当然找不到你预设的隐藏输入框，最终取到的value为空或undefined。
你单独打印截取后的id字符串是完全正常的，但这个字符串传入jQuery构造函数做选择器时会被按语法拆分解析，这就是你排查时觉得逻辑全对但拿不到值的核心原因。

优先推荐第一种写法，完全不依赖动态ID，鲁棒性最高：

• 方案1：通过DOM相对位置查找元素，彻底规避ID特殊字符问题

$(document).on("click", ".save", function() {
  // 从当前点击的保存按钮向上找到最近的tr行，再在该行内找存域名的隐藏输入框
  const domain = $(this).closest('tr').find('input[name="domain"]').val();
  console.log(domain);
});

这种写法不需要关心ID怎么生成、有没有特殊字符，只要表格行的DOM结构不变就能正常工作，后续改ID规则也不会影响这段逻辑。

• 方案2：保留原有ID拼接逻辑，绕过jQuery选择器解析
  如果一定要用ID匹配，不要把拼接后的字符串传给jQuery当选择器，直接用原生的getElementById方法，该方法会把传入的字符串当做完整ID精确匹配，不会解析特殊字符：

$(document).on("click", ".save", function() {
  const id = this.id.substr(3);
  const domain = document.getElementById('name' + id).value;
  console.log(domain);
});

内容的提问来源于stack exchange，提问作者Tejas Gurav