Javascript 单击按钮时将数据获取到Modal，按钮具有相同的ID
情景- 我有一个页面，上面有工作列表，每个工作列表都有一个名为apply的按钮。当你点击它时，一个模式会弹出，但是该模式没有用户想要申请的工作的上下文，所以我想以某种方式获得发布到该模式的工作的ID 问题-按钮正在按程序生成，并且具有相同的ID。因此，使用javascript捕获一个Javascript 单击按钮时将数据获取到Modal，按钮具有相同的ID,javascript,python,django,modal-dialog,Javascript,Python,Django,Modal Dialog,情景- 我有一个页面，上面有工作列表，每个工作列表都有一个名为apply的按钮。当你点击它时，一个模式会弹出，但是该模式没有用户想要申请的工作的上下文，所以我想以某种方式获得发布到该模式的工作的ID 问题-按钮正在按程序生成，并且具有相同的ID。因此，使用javascript捕获一个onclick事件原因，出于某种原因，它只获取第一个按钮的数据id {% for vacancy in vacancies %} <div class="card"> <div class=
onclick数据id{% for vacancy in vacancies %}
<div class="card">
<div class="card-body">
<h5 class="card-title">Job
Title - {{ vacancy.job_title }}
</h5>
<strong><p>Description </p></strong>
<p class="card-text">{{ vacancy.job_description }}</p>
</div>
<button id="openmodal" data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Apply
</button>
</div>
{% endfor %}
<div class="modal-body">
<form action="" class="customer-input" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group col-lg-6">
<label for="fullName">Full Name</label>
<br>
<input name="full-name" type="text" placeholder="Full Name" required="required">
</div>
<div class="form-group col-lg-6">
<label for="email">Email</label>
<br>
<input type="email" name="email" placeholder="Email" required="required">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Job Role</label>
<br>
<select class="job-role" name="job-role">
<option value="python-developer">Python Developer</option>
<option value="fullstack-developer">Full Stack Developer</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Your Resume</label>
<br>
<input type="file" name="resume" accept=".pdf, .docx, .doc, .odt, .ott">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="login-res-btn">Apply!</button>
</div>
</form>
</div>
{空缺百分比中的空缺百分比}
工作
职位-{{空缺.职位{u职位}
说明
{{空缺.职位描述}
申请
{%endfor%}
{%csrf_令牌%}
全名
电子邮件
工作角色
Python开发人员
全堆栈开发程序
你的简历
申请！
{% for vacancy in vacancies %}
<div class="card">
<div class="card-body">
<h5 class="card-title">Job
Title - {{ vacancy.job_title }}
</h5>
<strong><p>Description </p></strong>
<p class="card-text">{{ vacancy.job_description }}</p>
</div>
<button data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modal{{ vacancy.id }}">
Apply
</button>
</div>
<br>
<br>
<div class="modal text-center" id="modal{{ vacancy.id }}">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Apply for the desired role</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" class="customer-input" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group col-lg-6">
<label for="fullName">Full Name</label><br>
<input name="full-name" type="text" placeholder="Full Name"
required="required">
</div>
<div class="form-group col-lg-6">
<label for="email">Email</label><br>
<input type="email" name="email" placeholder="Email"
required="required">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Your Resume</label><br>
<input type="file" name="resume"
accept=".pdf, .docx, .doc, .odt, .ott">
<input type="text" value="{{ vacancy.id }}" name="job-title" readonly="readonly" hidden="hidden">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="login-res-btn">Apply!</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
{空缺百分比中的空缺百分比}
工作
职位-{{空缺.职位{u职位}
说明
{{空缺.职位描述}
申请
申请所需的职位
&时代；
{%csrf_令牌%}
全名
电子邮件
你的简历
申请！
{%endfor%}