我的删除按钮有问题

Question

我的按钮删除有问题。 Picture

如果我在第 1 行按删除键，警报将显示它。但是，如果我在第 2 行 - n 中按下删除按钮，它不会显示警报。

这是我的 JS 和 HTML 代码

   <script type="text/javascript">
     $('#AlertDelete').click(function(e) {
      
       swal({
           title: "Yakin akan menghapus data?",
           text: "Data yang sudah dihapus tidak akan bisa dikembalikan",
           type: "warning",
           showCancelButton: true,
           confirmButtonColor: '#DD6B55',
           confirmButtonText: 'Iya, hapus data!',
           cancelButtonText: "Batalkan!",
           confirmButtonClass: "btn-danger",
           closeOnConfirm: false,
           closeOnCancel: false
         },

         function(isConfirm) {
           if (isConfirm) {
            var data = $(this).serialize(); 
         $.post('<?php echo base_url();?>index.php/agen/delete/<?php echo $row['id_agen'];?>', data);
           swal("Terhapus!", "Data berhasil dihapus. Kamu akan diarahkan ke halaman sebelumnya secara otomatis", "success");
       setTimeout("location.href = 'http://localhost/cvatikan/index.php/buku';",1000);
           } else {
             swal("Dibatalkan", "Hapus data dibatalkan", "error");
           }
         });
     });
    </script>

  <h2 class="view-title">Kelola Agen</h2>
  <div id="masonry" class="row">
   <div class="module-wrapper masonry-item col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <section class="module module-headings">
     <div class="module-inner">
      <div class="module-heading">
       <h3 class="module-title">Daftar Agen</h3>
       <ul class="actions list-inline">
        <li><a href="<?php echo base_url();?>index.php/Agen/manage"><span class="icon icon_plus"></span></a></li>
        <!--<li><button type="button" class="btn btn-xs btn-primary" data-dismiss="modal"><span class="icon icon_plus"></span></button></li>-->
       </ul>
       
      </div>
       <div class="module-content collapse in" id="content-1">
        <div class="module-content-inner no-padding-bottom">
         <div class="table-responsive">
          <!-- di sini kontenny -->
         <table id="datatables-1" class="table table-striped display">
          <thead>
           <tr>
            <th>No</th>
            <th>ID Agen</th>
            <th>Nama Agen</th>
            <th>Alamat</th>
            <th>No. Telp</th>
            <th>Keterangan</th>
            <th>Action</th>
           </tr>
          </thead>
          <tbody>
           <?php if(@$result):?>
            <?php $i = 1;?>
            <?php foreach ($result as $row):?>
             <tr>
              <td><?php echo $i++;?></td>
              <td><?php echo $row['id_agen'];?></td>
              <td><?php echo $row['nama_agen'];?></td>
              <td><?php echo $row['alamat'];?></td>
              <td><?php echo $row['no_telp'];?></td>
              <td><?php echo $row['keterangan'];?></td>
              <td>
              <a href="<?php echo base_url();?>index.php/agen/manage/<?php echo $row['id_agen'];?>"class="btn btn-xs btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit</a>
              <a class="btn btn-xs btn-danger" id="AlertDelete"><i class="fa fa-trash"></i>Delete</a>
              </td>
             </tr>
            <?php endforeach?>
           <?php endif?>
          </tbody>
         </table>
         </div>
        </div>
       </div>
      </div>
     </section>
    </div>
   </div>

我希望有人能帮我解决这个问题。谢谢:)

Answer 1

我不确定这是否是您的问题，但我会为您的按钮使用 class 而不是 ID。最好不要有多个相同id的控件（违反W3C规范）。

有关详细信息，请参阅此 post

Answer 2

由于您动态绑定数据与您的 UI ，您不必为点击事件使用 id。而不是使用 class 名称来调用您的点击事件。

只需将 "AlertDelete" 设为 class 名称，如下代码所示

<tbody>
                                        <?php if(@$result):?>
                                            <?php $i = 1;?>
                                            <?php foreach ($result as $row):?>
                                                <tr>
                                                    <td><?php echo $i++;?></td>
                                                    <td><?php echo $row['id_agen'];?></td>
                                                    <td><?php echo $row['nama_agen'];?></td>
                                                    <td><?php echo $row['alamat'];?></td>
                                                    <td><?php echo $row['no_telp'];?></td>
                                                    <td><?php echo $row['keterangan'];?></td>
                                                    <td>
                                                    <a href="<?php echo base_url();?>index.php/agen/manage/<?php echo $row['id_agen'];?>"class="btn btn-xs btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit</a>
                                                    <a class="btn btn-xs btn-danger AlertDelete"><i class="fa fa-trash"></i>Delete</a>
                                                    </td>
                                                </tr>
                                            <?php endforeach?>
                                        <?php endif?>
                                    </tbody>


And change below code in js

    <script type="text/javascript">
                        $(document).
    on('click','.AlertDelete',function(e) {

                          swal({
                              title: "Yakin akan menghapus data?",
                              text: "Data yang sudah dihapus tidak akan bisa dikembalikan",
                              type: "warning",
                              showCancelButton: true,
                              confirmButtonColor: '#DD6B55',
                              confirmButtonText: 'Iya, hapus data!',
                              cancelButtonText: "Batalkan!",
                              confirmButtonClass: "btn-danger",
                              closeOnConfirm: false,
                              closeOnCancel: false
                            },

                            function(isConfirm) {
                              if (isConfirm) {
                                var data = $(this).serialize(); 
                                $.post('<?php echo base_url();?>index.php/agen/delete/<?php echo $row['id_agen'];?>', data);
                                swal("Terhapus!", "Data berhasil dihapus. Kamu akan diarahkan ke halaman sebelumnya secara otomatis", "success");
                                setTimeout("location.href = 'http://localhost/cvatikan/index.php/buku';",1000);
                              } else {
                                swal("Dibatalkan", "Hapus data dibatalkan", "error");
                              }
                            });
                        });
                    </script>

我的删除按钮有问题

Something wrong with my button delete

javascript

jquery

codeigniter-3