Q&A
前提・実現したいこと
ボタンを押した時にajaxでhtmlを読み込みたい
発生している問題・エラーメッセージ
起動ボタンを押した時に１回目だけ効かない。２回押すと起動する。
ボタンで起動するjs関数の中身のalertは初回から動作しているのでajax部分だけが２回目からしか動かない。
どなたかわかる方はいませんか？
該当のソースコード
js
1function ajax_get(){ 2 3 alert("外部jsテスト"); //ここだけ初回から動くためjsファイル自体へのリンクは通っている 4 $(function(){ //この行以降が２回目からしか動作しない。 5 $('#button2').click( 6 function(){ 7 $.ajax({ 8 type:'GET', 9 url:'ajaxtest', 10 dataType:'html', 11 }).done(function (results){ 12 $('#text').html(results); 13 }).fail(function(jqXHR,textStatus,errorThrown){ 14 alert('ファイルの取得に失敗しました。'); 15 console.log("ajax通信に失敗しました") 16 console.log(jqXHR.status); 17 console.log(textStatus); 18 console.log(errorThrown.message); 19 }); 20 } 21 ); 22 }); 23} 24
ajax起動ボタンと結果表示領域のid指定
php
1 <input type="button" id="button2" value="外部jsテスト" onclick="ajax_get()"><br/> 2 <div id="text"></div>
jsファイルの読み込み
php
1 <head> 2 <meta charset="utf-8"> 3 <!-- BootstrapのCSS読み込み --> 4 <link href="css/bootstrap.min.css" rel="stylesheet"> 5 <!-- jQuery読み込み --> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 7 <!-- BootstrapのJS読み込み --> 8 <script src="js/bootstrap.min.js"></script> 9 <script type="text/javascript" src="{{ URL::asset('js/mystore.js') }}"></script> 10 </head>
試したこと
GoogleCromeとSafariで動作確認しましたが、同じ結果。
サーバーを再起動しても同じ結果になりました。
初回だけページの最後までタグが読めていないのかと思い
ぼたんのonclickを$(function(){ajax_get()})
と囲ってみましたが結果は変わりませんでした。
補足情報（FW/ツールのバージョンなど）
PHP 7.2
Laravel5
blade
macOS
回答1件
0
ベストアンサー
click() メソッドはリスナを登録するのみです。
（ボタンを押したときに、 click() に渡した function を実行してねと伝えるのみで実行するわけではない
ので、現状の動きだと
- ボタンを押す
- onclick にある
ajax_get()が実行される ajax_get()ではリスナが登録される ( 前述の通りclickの中身が実行されるわけではない- 1度目はリスナが登録されるだけで ajax は走らない
- 2度目は
#button2にリスナが登録されているので、押すことでリスナの中身が実行される
そのため修正をすると
javascript
1 2$(function(){ // HTMLが読み込まれた際に実行 3 // ボタンが押されたときではなく、HTMLが読み込まれた段階でリスナをつけてしまう 4 $('#button2').click(function(){ 5 $.ajax({ //... 6}
html
1<!-- リスナはもうついているので、 onclick は不要 --> 2<input type="button" id="button2" value="外部jsテスト"><br/>
となるかと思います
投稿2019/09/08 06:01
編集2019/09/08 06:03
総合スコア1531
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/08 06:17