jqueryのloadで追加した要素を取得できない

##jqueryのloadで追加した要素を取得できない
jqueryのloadを使って、index.htmlにinner.htmlを入れて、inner.htmlにある要素#sectionを取得できません
$("#section")[0]と記述しても取得することができず、undefinedになります

index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>test page</title>
6	<script src="jquery.min.js"></script>
7	<script src="index.js"></script>
8</head>
9<body>
10	<div id="jquery_area"></div>
11</body>
12</html>

inner.html

html
1<!DOCTYPE html>
2<html>
3<head>
4	<title>inner</title>
5</head>
6<body>
7	<p>OKOKOK</p>
8	<p id="section">focus</p>
9</body>
10</html>

index.js

js
1$(function(){
2
3  // $(セレクタ).メソッド
4  $("#jquery_area").load("inner.html");
5  jquery_area = $("#section")[0]
6  console.log(jquery_area)//undefined
7});

m.ts10806

2019/07/08 08:35

コードブロック冒頭はあくまで「言語名」を記載する場所なのでファイル名ではなく言語名を記載してください。ファイルはコードブロックの外にでも補足として記載しておいてください。例： index.html ```html ```

OK_im_fine_now

2019/07/08 08:42

ファイル名の書き方に困ってたので助かりました修正しておきました

行動規範の内容に同意します

回答1件

ベストアンサー

Ajaxで読み込む.loadは非同期処理ですので、.loadを実行した次の行ではその結果を取ることはできません。

.loadは、終了時に実行するコールバック関数を取りますので、その中で実行しましょう。

javascript
1$(function(){
2
3  // $(セレクタ).メソッド
4  $("#jquery_area").load("inner.html", function(){
5    var jquery_area = $("#section")[0]
6    console.log(jquery_area)
7  });
8
9});