前提・実現したいこと
- html1からjQueryの.loadでhtml2を読み込みます。
- 読み込んだタイミングで、html2のbutton2を非活性にしたいです。
ただし、サンプルは非常に簡単なコードですが、実際のコードは、html2で検索処理を行って検索結果をもとにbutton2を生成しております。html2の処理は1、2秒かかります。
発生している問題・エラーメッセージ
- html2をロードした直後に、prop()しようとしても、そもそも$(#button2)が取得できません。
該当のソースコード
- サンプルなので、イメージだけ掴んでいただければと思います。(このコードも失敗します(disabledになりません))
html1
1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 5 </head> 6 <body> 7 <div id="loadHtml2"></div> 8 <script type="text/javascript"> 9 $(function(){ 10 $("#loadHtml2").load("./html2.html"); 11 $("#button2").prop("disabled",true); 12 }); 13 </script> 14 </body> 15</html>
html2
1<!--実際はこの画面内で検索処理を行っており、検索結果をもとにボタン要素を生成しています--> 2<button id="button2">button2</button>
試したこと
- html1にbutton1を作成し、onclickで
$("#button2").prop("disabled",true);
を記載したところ、ボタン押下時に非活性になりました。
html1
1<button id="button1" onclick="setDisabled()">button1</button>
JavaScript
1function setDisabled(){ 2 $("#button2").prop("disabled",true); 3}
回答3件
あなたの回答
tips
プレビュー