javascript - onclick 监听器仅按特定顺序工作？

Question

我有一个动态创建的表/image/Li3s7.jpg单击勾号后，将打开一个模式 /image/kiDsr.jpg单击“接受”时，必须将值插入到数据库中，但是如果我按照从上到下的顺序(即从第一个人开始，然后是下一个)执行此操作，则会发生这种情况。如果我从随机点开始，就像我在开始时单击第四个人的“接受”按钮然后插入空值..请帮助我？

 <!-- html code for tick button and accept -->
<td>                                 
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{pl.id}}_1"><i class="fa fa-check" aria-hidden="true" style="color:green"></i></button>

<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog">
  <div class="modal-dialog">
  <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
      </div>
      <form action={% url 'm_manage:accept' %}  method="POST">
      {% csrf_token %}
       <div class="modal-body">
        <p><input type="checkbox" name="email" id="email" > Notify Via Email<br></p>
        <p><label for="message">Message </label>
        <textarea rows="3" name="message" id="message" class="form-control input-md"></textarea></p>
   </div>
   <div class="modal-footer" id="{{pl.id}}">
    <button type="button" class="btn btn-success" id="accept_{{pl.id}}" data-dismiss="modal">Accept</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </form>
 </div>
 </div>
 </div>
 </td>


<!--my jQuery call---->
$(document).on('click','[id^="accept_"]', function(e){
    e.preventDefault();  
    var v_id=$(this).closest('div').attr('id');
    // tried msg
    var msg=$('#message').val();
    // tried getElementbyId
    // var msg_1=document.getElementById("message").value;
    var check=$('#email').is(':checked');
    console.log(msg);
    // console.log(msg_1);
    console.log(check);
    console.log(v_id);

Answer 1

HTML 中的标识符必须唯一，重复的标识符会创建无效的 HTML。

您可以使用类选择器来定位元素，并使用 DOM 遍历方法来定位所需的元素。

另外使用data-*自定义属性来存储可以使用.data()方法获取的任意数据。

将 HTML 修改为

<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
  <div class="modal-dialog">
  <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
      </div>
      <form action={% url 'm_manage:accept' %}  method="POST">
      {% csrf_token %}
       <div class="modal-body">
        <p><input type="checkbox" name="email" class="email" > Notify Via Email<br></p>
        <p><label for="message">Message </label>
        <textarea rows="3" name="message" class="message" class="form-control input-md"></textarea></p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-success accept" data-dismiss="modal">Accept</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </form>
 </div>
 </div>
 </div>

脚本

$(document).on('click', '.accept', function (e) {
    e.preventDefault();
    var modal = $(this).closest('.modal');
    var v_id = modal.data('id');
    var msg = modal.find('.message').val();
    var check = modal.find('.email').is(':checked');
    console.log(v_id, msg, check);
});