Question

我有一个动态创建的表格https://imgur.com/a/NDkVX点击勾选标记一个模式打开https://imgur.com/a/0RI1W点击接受必须将值插入数据库但是如果按照从顶部到底部即从第一人然后下一个..如果我从随机点开始，就像我在开始时点击第4个人的接受按钮那么插入空值。请帮助我吗？

 <!-- 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);
});

onclick听众只按特定顺序工作？

1 个答案: