次のページでJavascriptのポップアップが機能しないページ番号

Question

PHPとJavascriptを使用してデータビューのようなプロジェクトをビルドしました。私のページでは、それはページテーブルを使用してユーザーテーブルを持っています。すべての行に削除ボタンがあります。最初のページでそのボタンをクリックすると、そのボタンが正しく機能します。次のページのすべての行で削除ボタンをクリックすると、ポップアップがもう機能しなくなったように見えます。以下の私のコードです。（しばらく$ iのすべての行のユニークなIDの変数である機能 - ）削除ボタン用のPHPスクリプトで

$(".mb-control").on("click",function(){ 
 
     var box = $($(this).data("box")); 
 
     if(box.length > 0){ 
 
      box.toggleClass("open"); 
 

 
      var sound = box.data("sound"); 
 

 
      if(sound === 'alert') 
 
       playAudio('alert'); 
 

 
      if(sound === 'fail') 
 
       playAudio('fail'); 
 

 
     }   
 
     return false; 
 
    }); 
 
    $(".mb-control-close").on("click",function(){ 
 
     $(this).parents(".message-box").removeClass("open"); 
 
     return false; 
 
    });

HTML：

Javascriptのポップアップを実行するための

<?php 
 

 
echo "<td> 
 
\t 
 
\t <button class='btn btn-warning mb-control btn-sm' href='./function/liststaff.remove.php?remove=".$getdata['username']."' data-box='#message-box-warning".$i."'>Remove <i class='glyphicon glyphicon-remove-circle'></i></button></a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t <div class='message-box message-box-warning animated fadeIn' id='message-box-warning".$i."'> 
 
\t <div class='mb-container'> 
 
\t <div class='mb-middle'> 
 
\t <div class='mb-title'><span class='fa fa-warning'></span> Warning</div> 
 
\t <div class='mb-content'> 
 
\t <p>Are you sure want to delete user <strong>".$getdata['username']." </strong>?.</p>     
 
\t </div> 
 
\t <div class='mb-footer'> 
 
\t <div class='pull-right'> 
 
\t <a href='index.php?delete=".$getdata['id']."' class='btn btn-success btn-lg'>Yes</a> 
 
\t <button class='btn btn-default btn-lg mb-control-close'>No</button> 
 
\t </div> 
 
\t </div> 
 
\t </div> 
 
\t </div> 
 
\t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t </td>"; 
 

 
?>

助けてください。

Answer 1

クラス名がのmb-controlが2番目のページのボタンのように動的に作成された要素にクリックイベントをバインドしようとしました。そのため、イベントは既存の要素にのみ添付されます。

お手数ですがお手伝いします。

$("body").on("click",".mb-control-close",function(){ 
     $(this).parents(".message-box").removeClass("open"); 
     return false; 
    }); 

$("body").on("click",".mb-control",function(){ 
     var box = $($(this).data("box")); 
     if(box.length > 0){ 
      box.toggleClass("open"); 

      var sound = box.data("sound"); 

      if(sound === 'alert') 
       playAudio('alert'); 

      if(sound === 'fail') 
       playAudio('fail'); 

     }   
     return false; 
    }); 

Answer 2

私はボタンを含むあなたのページ分割行は、彼らがdynmaically作成されるので、イベントをクリックして結合することができないと思います：結合イベントのために

$(document).on('click','.mb-control-close', function (event) { 
     $(this).parents(".message-box").removeClass("open"); 
      return false; 
    }); 

jsfiddle

Answer 3

：

はこれを試してみてください直接的なイベントは使用しないでください。代わりに委任されたイベントを使用してください。見てくださいhere。