異なる要素と同じIDを使用したAjaxを使用したブートストラップモーダルポップアップ

Question

現在、ニュースレタープロジェクトで作業中です。

"リスト"ページには、ブートストラップデータテーブルを持つすべてのメーリングリストが表示され、すべてのレコードに「アクション」アイコン（表示、編集、削除）があります。ユーザーが「ビュー」アイコンを押すと、その中に別のデータテーブルを持つブートストラップモーダルポップアップを使用して「メールリスト」のレコードを表示します。モーダル内部のデータを取得するには、Ajax関数を使用してデータベースに接続し、各要素の"data-row"属性を使用して行のIDを取得します。ここで

は私「リスト」ページコードであるあなたが呼ばれる属性がある見ることができるようデータ行がレコードのid、が含まれていますが、私は唯一の使用

<table id="datatable" class="table table-striped table-bordered"> 
<thead> 
    <tr> 
    <th style="width:5%;">No</th> 
    <th>Nama Milis</th> 
    <th style="width:20%;">Jumlah email</th> 
    <th>Action</th> 

    </tr> 
</thead> 


<tbody> 

<?php 
$i=1; 
foreach ($milis as $milis){ 
?> 


    <tr> 
    <td><?php echo $i;?></td> 
    <td><?php echo $milis['nama'];?></td> 
    <td><?php echo $this->m_mailinglist->get_mail_milis($milis['id'])->num_rows();?></td> 
    <td> 
    <button type="button" id="view-button" class="btn btn-success" data-row="<?php echo $milis['id'];?>" data-toggle="modal" data-target=".email-modal"><i class="fa fa-eye" ></i></button> 
    <button type="button" class="btn btn-warning"><i class="fa fa-pencil"></i></button> 
    <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button> 
    </td> 

    </tr> 
<?php 
$i++; 
} 
?> 


</tbody> 

私のレコードに同じ名前の "view-button"がありますが、これは問題ですか？

<button type="button" id="view-button" class="btn btn-success" data-row="<?php echo $milis['id'];?>" data-toggle="modal" data-target=".email-modal"><i class="fa fa-eye" ></i></button> 

と、これは私は問題がクリックされ

をクリックした私のAjaxコード私はすべての単一の要素のデータ行属性を取得するためにGET_ATTRIBUTEを使用

$(document).ready(function(){ 
    $("#view-button").click(function(e){ 

     var id = e.target.getAttribute("data-row"); 
     alert(id); 
     $('.loading').show(); 
     $.ajax({ 
     type:'POST', 
     cache:false, 
     url:'<?php echo base_url();?>Mailinglist/ajax_listemail', 
     data:{id:id}, 
     success:function(data){ 
      $('.loading').hide(); 
      $('.modal-content').html(data); 

     }, 
     async:false 
     }); 


    }); 

}); 

です関数はレコードの最初のボタンでのみ機能し、残りのレコードは "id"アラートを表示せず、データを取得できません。これを行う最も単純なやり方のすべての解決策もありますか？ありがとう:)クリックボタン上のコードの下

Answer 1

$(document).on("click", '.requestmail', function(event) { 
 

 

 
var valu = $(this).attr('attrd'); 
 
    alert(valu); 
 
var $modal = $('#myModal'); 
 

 

 
$.ajax({ 
 
            
 
            method: "POST", 
 
            
 
\t \t \t url: '<?php echo base_url();?>Mailinglist/ajax_listemail', 
 
\t \t \t cache: false, 
 
\t \t \t data: {id:valu}, 
 
           success: function(msg) 
 
           { 
 
           if(msg!='') 
 
           { 
 
           $modal.modal('show'); 
 
          $(".modal-data2").html(msg); 
 
           
 
           } 
 
         
 
           } 
 
          
 

 
}); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<button type="button" id="view-button" class="btn btn-success requestmail" attrd="1" ><i class="fa fa-eye" ></i></button> 
 

 
<button type="button" id="view-button" class="btn btn-success requestmail" attrd="2" ><i class="fa fa-eye" ></i></button> 
 

 
<div class="modal fade bs-example-modal-sm request-form" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
      <div class="modal-dialog" role="document"> 
 
       <div class="modal-content modal-data2"> 
 
       </div> 
 
      </div> 
 
     </div>