動的に作成されたオーディオオブジェクトでの再生時にアクセスする

Question

私は、ウェブページ上のオーディオファイル用の簡単な再生カウンタを持っています。これは、別のjQueryのAjaxは、同じクラスなど（ファイルの再生）

 jQuery(document).ready(function($) { 

      /*now events will only be bound to this instance*/ 
      $('body .sermonmp3').on('playing',function(){ 
       /* within event callbacks keep searches within the main container element*/      
       var fileID=$(this).attr('id'); 
       console.log(fileID); 
       var data = {file_id: fileID ,security:ChurchAdminAjax.security}; 

       jQuery.post(ChurchAdminAjax.ajaxurl, { 'action': 'ca_mp3_action','data': data }, 
        function(response){ 
         console.log(response); 
         $('body .plays').html(response); 

        } 
       ); 

      }); 

}）と異なるファイルにそれを更新したときに最初にロードされたオーディオファイルのために動作しますが、ありません。

私は何を間違えていますか？

Answer 1

コードを関数に入れ、新しいオーディオ要素が作成されるたびに呼び出すことで、この問題を修正しました。

 function bindEvents(){ 

      $('body .sermonmp3').on('playing',function(){ 

       var fileID=$(this).attr('id'); 
       console.log(fileID); 
       var data = {file_id: fileID ,security:ChurchAdminAjax.security}; 

       jQuery.post(ChurchAdminAjax.ajaxurl, { 'action': 'ca_mp3_action','data': data }, 
        function(response){ 
         console.log(response); 
         $('body .plays').html(response); 

        } 
       ); 

      }); 
     }