将 Id 属性从（JQuery）选择器传递到（JavaScript 的）document.getElementById()答案

【问题标题】：Passing Id attribute from a (JQuery) selector into (JavaScript's) document.getElementById()将 Id 属性从（JQuery）选择器传递到（JavaScript 的）document.getElementById()
【发布时间】：2016-04-12 04:06:38
【问题描述】：

我正在尝试使用here 的解决方案，使用它包含的link 提交form（而不是使用标准的input 提交按钮）

<form id="form-id">
   <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

表单是一个记录表，每个记录的最左侧列中都有一个“E”链接，用于加载记录以进行编辑

<td style="text-align:center;">
    <a id="a_edit_btn_#RecordId#">E</a>&nbsp;&nbsp;
</td>

我想在点击时触发以下内容

document.getElementById( $("a[id^='a_edit_btn_']").get(0).getAttribute("id") ).addEventListener("click", function () {
    ...
    form.submit();
});

但出现以下错误

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

是否可以通过这种方式使用选择器来获取Id属性？

【问题讨论】：

你为什么要把jQuery和普通的JS混在一起？坚持其中之一更容易，更安全
@nem 出于同样的原因，他们不付给我大笔钱。
这是……你很坏？ :)（对不起）
如果您已经通过 jQuery 获取了该元素，那么使用getElementById()再次获取它有什么意义？整件事毫无意义。
说真的，jQuery 只是为了简化 Javascript 的语法。您通过尝试奇怪地混合 jQuery 和纯 JS 使事情变得更加复杂。为什么不直接使用 jQuery 并使用它呢？这只会让您的生活更轻松。

标签： javascript jquery

【解决方案1】：

忘记 jQuery 和纯 Javascript 的大杂烩 - 您的 addEventListener 代码一次只能处理一个元素，而 jQuery 事件处理程序可以一次绑定到多个元素：

$("a[id^='a_edit_btn_']").on('click', function() {
    // the ID of the clicked link will be in "this.id"
    var which = this.id;

    form.submit();
});

也就是说 - 这些多个按钮都导致表单提交真的是您的意图吗？

【讨论】：

我以为他只想为第一项做这件事？
@nem 他在哪里说的？他说“每条记录在左栏中都有一个链接”。
@SamusArin 代码很好——如果这不起作用，你要么有一个 really 旧版本的 jQuery（没有 .on 方法），要么 jQuery 没有'未正确加载。
升级不可掉以轻心 - 如果无法升级，请将 .on('click', ...) 替换为 .bind('click', ...)
@SamusArin FWIW，还有一个 .click 方法，但我总是避免这样做，因为相同的函数既可用于 register 点击处理程序，也可用于触发点击事件。为了避免读者混淆，我总是使用.on（或以前的.bind）表示前者，而使用.trigger表示后者，以完全明确预期的用途。