使用一个模式的所有条目javascript

Question

我正在尝试发送我们选择在表单操作中编辑的对象的id。

let edit_buttons = document.querySelectorAll(".edit-modal");
for(var i = 0; i < edit_buttons.length; i++) {
edit_buttons[i].addEventListener("click", function(e) {
console.log(`${this.getAttribute("data-id")}`)
console.log(`{% url 'users:edit' pk=1 %}`)
document.querySelector("form").setAttribute("action", `{% url 'internal-users:edit-product' pk=${this.getAttribute("data-id")} %}`);
})
}

<tr>
<td class="border-0 size-13 text-gray-dark">
<button class="btn btn-gray text-gray size-13 edit-modal"  data-id="1" data-toggle="modal" data-target="#editModal">Edit</button>
</td>
</tr>
<tr>
<td class="border-0 size-13 text-gray-dark">
<button class="btn btn-gray text-gray size-13 edit-modal"  data-id="2" data-toggle="modal" data-target="#editModal">Edit</button>
</td>
</tr>
{% endfor %}

<form method="POST" action="">
{% csrf_token %}
<input type="hidden" id="object_id">

</form>

如果我们选择要编辑的第一个条目我希望表单的动作是/users/1/edit/

如果我尝试添加javascript，我得到以下错误

Could not parse the remainder: '${this.getAttribute("data-id")}' from '${this.getAttribute("data-id")}'

如果有人能帮助我，我会很高兴，提前感谢!

Answer 1

委托

document.querySelector("#myTable tbody").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("edit-modal")) {
document.getElementById("postForm").action = `someurl?id=${tgt.dataset.id}`;
console.log(document.getElementById("postForm").action)
}
})

<table id="myTable">
<tbody>
<tr>
<td class="border-0 size-13 text-gray-dark">
<button class="btn btn-gray text-gray size-13 edit-modal" data-id="1" data-toggle="modal" data-target="#editModal">Edit</button>
</td>
</tr>
<tr>
<td class="border-0 size-13 text-gray-dark">
<button class="btn btn-gray text-gray size-13 edit-modal" data-id="2" data-toggle="modal" data-target="#editModal">Edit</button>
</td>
</tr>
</tbody>
</table>

<form method="POST" id="postForm" action="">
</form>