Какие ошибки с кодом JQuery?

Question

@foreach($deductionrules as $deductionrule)
 <tr>
   <td><b>{{ $deductionrule->leavePenalty }}</b></td>
   <td><b>{{ $deductionrule->absentPenalty }}</b></td><td><b>{{ $deductionrule->latePenalty }} | {{ $deductionrule->deductionId }}</b></td>

   <td align="center">
    <button class="btn btn-danger delete-deductionrules" data-iddeductionrules="{{ $deductionrule->deductionId }}" ><i class="fa fa-trash"></i></button>
   <button class="btn btn-success edit-deductionrules" data-rolesid="{{ $deductionrule->deductionId }}" data-leavePenalty="{{ $deductionrule->leavePenalty }}"  data-absentPenalty="{{ $deductionrule->absentPenalty }}" data-latePenalty="{{ $deductionrule->latePenalty }}" ><i class="fa fa-edit m-right-xs"></i></button>
   </td>
 </tr>
@endforeach

вот мой jquery script type = "text / javascript" src = "{{asset ('js / jquery.min.js')}}">

<script type="text/javascript">
           // edit deduction rules modal
            $(document).on('click', '.edit-deductionrules', function() {


              $('#id_edit').val($(this).data('rolesid'));
              $('#absentPenalty').val($(this).data('absentPenalty'));
              $('#latePenalty').val($(this).data('latePenalty'));
              $('#editrule').modal('show');

            });
        </script> 

отсюда доступен только идентификатор. В чем проблема?

Answer 1

Где находятся эти элементы? Нравится id_edit? Если они не являются входными данными, измените их на входные

Answer 2

Использование $(this).attr('data-absentPenalty'); не .data(...)

           $(document).on('click', '.edit-deductionrules', function() {

              $('#id_edit').val($(this).attr('data-rolesid'));
              $('#absentPenalty').val($(this).attr('data-absentPenalty'));
              $('#latePenalty').val($(this).attr('data-latePenalty'));
              //$('#editrule').modal('show');
              //for test...
                $('#div_for_edit').slideDown();
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table width="100%" border="1">
 <tr>
   <td><b>leavePenalty</b></td>
   <td><b>absentPenalty</b></td><td><b>latePenalty | deductionId</b></td>

   <td align="center">
    <button class="btn btn-danger delete-deductionrules" data-iddeductionrules="deductionId" ><i class="fa fa-trash"></i>X</button>
   <button class="btn btn-success edit-deductionrules" data-rolesid="deductionId" data-leavePenalty="leavePenalty"  data-absentPenalty="absentPenalty1" data-latePenalty="latePenalty1" ><i class="fa fa-edit m-right-xs"></i>edit</button>
   </td>
 </tr>

 <tr>
   <td><b>leavePenalty</b></td>
   <td><b>absentPenalty</b></td><td><b>latePenalty | deductionId</b></td>

   <td align="center">
    <button class="btn btn-danger delete-deductionrules" data-iddeductionrules="deductionId" ><i class="fa fa-trash"></i>X</button>
   <button class="btn btn-success edit-deductionrules" data-rolesid="deductionId" data-leavePenalty="leavePenalty"  data-absentPenalty="absentPenalty2" data-latePenalty="latePenalty2" ><i class="fa fa-edit m-right-xs"></i>edit</button>
   </td>
 </tr>
</table>



<div id="div_for_edit" style="display:none;">
   <input type="text" id="id_edit" value=""/>
    <input type="text" id="absentPenalty" value=""/>
    <input type="text" id="latePenalty" value=""/>
</div>