JavaScriptはローカルでは動作しますが、サーバ上では動作しません

Question

JavaScriptコードに問題があります。ウェブサイトをローカルでテストするとうまく動作しますが、ページをリロードしない限り、サーバでは動作しません。コードは以下の通りです。詳細が必要な場合はお知らせください。

$(document).ready(function(){ 

$("#header_inbox_bar").click(function() { 

const inboxtopcount = $('#inboxtopcount') 
const badgedanger = inboxtopcount.parent('.badge-danger') 

$.ajax({ 
    type: 'POST', 
    url: 'controllers/ctrl_client_update_inbox_notifications.php', 
    success (res) { 
    if (res) { 

     badgedanger.hide() 
     inboxtopcount.hide() 
    } 
    }, 

}); 
}); 
}); 

Answer 1

私の推測では、DOM要素はjQueryに時間的にバインドされていません。また、jQueryで構文エラーや構文がないか調べてみてください。

ロード時のバインディングの問題に対処するには、jQueryの 'on'メソッドを使用して、#header_inbox_bar要素を渡して後でバインドできるようにしてください。

$(document).ready(function() { 
 

 
    $('body').on('click', '#header_inbox_bar', function() { 
 

 
     const inboxtopcount = $('#inboxtopcount'); 
 
     const badgedanger = inboxtopcount.parent(); 
 

 
     $.ajax({ 
 
      type: 'POST', 
 
      url: 'controllers/ctrl_client_update_inbox_notifications.php', 
 
      success(res) { 
 
       badgedanger.hide(); 
 
      }, 
 
     }); 
 

 
    }); 
 
});