aタグのidをクリック時に取得したい．

大学の課題で簡素なウェブページの作成を行っているのですが，aタグに関する動作が上手くいきません．

具体的には，aタグをクリックした時に，そのaタグのidを取得してJavaScriptで扱いたいのですが．．．

全体的な動作の流れとしては，
SubjectList.htmlからSubjectListCtrl.jsを呼び出す
↓
SubjectListCtrl.jsからStudent.php, Subject.phpを呼び出す
↓
Studentphp, Subject.phpからデータを返す．
↓
SubjectListCtrl.jsでSubjectList.htmlに<a>を追加していく．
↓
科目一覧表示

というのが今出来ている流れで，ここから，この時に作成したaタグのidを，クリックした時にJavaScript内で扱えるように取得したいのです．

以下がソースコードになります．
・SubjectList.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<!-- Required meta tags -->
5		<meta charset="utf-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8		<!-- Bootstrap CSS -->
9		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10
11		<!-- Optional JavaScript -->
12		<!-- jQuery first, then popper.js, then Bootstrap JS -->
13		<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
14		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
15		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
16
17		<!-- Original JavaScript -->
18		<script src="../js/SubjectListCtrl.js"></script>
19		<script src="../js/ShowReviewCtrl.js"></script>
20		<script src="../js/EditReviewCtrl.js"></script>
21
22		<script>
23			/**
24			 * ページの再読み込み
25			 */
26			function reload() {
27				window.location.reload();
28			}
29		</script>
30
31		<title>履修登録</title>
32	</head>
33	<body>
34		<h1>履修科目一覧</h1>
35
36		<div class="container">
37			<ul id="subjects"></ul>
38
39			<!-- 再読み込みボタン -->
40			<input id="relaod_button" type="button" value="再読み込み" onclick="reload();"/>
41		</div>
42
43		<!-- 科目一覧を表示 -->
44		<script>
45			$(function() {
46				var slc = new SubjectListCtrl();
47				slc.showList();
48			});
49
50			$(function() {
51				$('.subject').on('click',
52					function(e) {
53						e.preventDefault();
54						e.stopPropagation();
55						var id = $(this).attr('id');
56						alert(id);
57					}
58				);
59			});
60		</script>
61	</body>
62</html>

・SubjectListCtrl.js

JavaScript
1/**
2 * 履修科目一覧を表示するコントロールクラス
3 *
4 * @method {void} showList
5 * @method {void} show
6 * @method {void} new
7 */
8function SubjectListCtrl() {}
9
10/**
11 * 科目一覧を表示
12 *
13 * @return void
14 */
15SubjectListCtrl.prototype.showList = function() {
16	$.getJSON('../php/Student.php', { method: 'subjects'},
17		function(json) {
18			for(var id of json) {
19				$.getJSON('../php/Subject.php', { method: 'getTitle', id: id},
20					function(subject) {
21						$('#subjects').append('<li><a class="subject" id="sub_'+subject['id']+'" href="#" click>'+subject['title']+'</a></li>');
22					}
23				);
24			}
25		}
26	);
27}
28
29/**
30 * レビューを表示
31 *
32 * @param {int} id 科目ID
33 * @return void
34 */
35SubjectListCtrl.prototype.show = function(id) {
36
37}
38
39/**
40 * レビューを投稿
41 *
42 * @param {int} id 科目ID
43 * @return void
44 */
45SubjectListCtrl.prototype.new = function(id) {}

・Studnet.php

PHP
1<?php
2header('content-type: application/json; charset=utf-8');
3ini_set('display_errors',1);
4
5/**
6 * 学生のエンティティクラス
7 *
8 * @property int $sutudentNo 学生番号
9 * @method int[] $subjects()
10 * @method string getReview()
11 * @method void setReview()
12 */
13class Student {
14	private $studentNo = 0;
15
16	/**
17	 * 履修している科目のidリストを返す
18	 *
19	 * @return int[] 履修している科目のidリスト
20	 */
21	public function subjects() {
22		$idArray = [0,1,2,3,4,5,6,7,8,9];
23		return $idArray;
24	}
25
26	/**
27	 * 指定された科目のレビューを取得する
28	 *
29	 * @param int $id 対象の科目id
30	 * @return string 対象の科目のレビュー
31	 */
32	public function getReview($id) {
33		return;
34	}
35
36	/**
37	 * 指定された科目のレビューを登録する
38	 *
39	 * @param int $id 対象の科目id
40	 * @param string $text 登録するレビュー文
41	 * @return void
42	 */
43	public function setReview($d, $text) {
44		return;
45	}
46}
47
48$st = new Student();
49
50if($_GET['method'] === 'subjects') {
51	echo json_encode($st->subjects());
52}
53else {
54	echo json_encode(array('error'=>"unknown_method"));
55}
56exit();

・Subject.php

PHP
1<?php
2/**
3 * 科目のエンティティクラス
4 *
5 * @property int $id 科目ID
6 * @property string $title 科目名
7 * @method string getTitle()
8 */
9class Subject {
10	private $id;
11	private $title;
12
13	/**
14	 * コンストラクタ
15	 *
16	 * @param int $id 科目ID
17	 * @param string $title 科目名
18	 */
19	function __construct($id, $title) {
20		$this->id = $id;
21		$this->title = $title;
22	}
23
24	/**
25	 * 科目のタイトルを取得する
26	 *
27	 * @param int $id 科目ID
28	 * @return string 科目名
29	 */
30	public function getTitle($id) {
31		if ($this->id == $id) {
32			return $this->title;
33		}
34		return 0;
35	}
36}
37
38$sb = [
39	new Subject(0, 'AAA'),
40	new Subject(1, 'BBB'),
41	new Subject(2, 'CCC'),
42	new Subject(3, 'DDD'),
43	new Subject(4, 'EEE'),
44	new Subject(5, 'FFF'),
45	new Subject(6, 'GGG'),
46	new Subject(7, 'HHH'),
47	new Subject(8, 'III'),
48	new Subject(9, 'JJJ'),
49];
50
51if($_GET['method'] === 'getTitle') { // sd_1
52	$id = $_GET['id'];
53	$subject = [
54		"title" => $sb[$id]->getTitle($id),
55		"id" => $id
56	];
57	echo json_encode($subject);
58}

初心者ゆえ説明が拙く，必要な情報が欠けている事もあると思いますので，追記するべき情報がありましたらご指摘頂けると幸いです．
ご助言をよろしくお願いします．

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

回答2件

ベストアンサー

非同期処理後に要素が増えるので、書き方を返る必要があります。

js
1$('#subjects').on('click', '.subject', function(e) {
2	e.preventDefault();
3	e.stopPropagation();
4	var id = $(this).attr('id');
5	alert(id);
6});

投稿2019/12/30 09:20

kei344

総合スコア69596

Malo

2019/12/30 09:29

ご回答ありがとうございました．状態が改善できましたので，BAとさせていただきました．本当に助かりました！

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

HTML
1          $(function() {
2                $('.subject').on('click',

の部分ですが，正しくは

HTML
1          $(function() {
2                $('#subject').on('click',

だと思います。class名のときは「.」を使い，id名のときは「#」を使います。

投稿2019/12/30 09:08

k-810

総合スコア192

Malo

2019/12/30 09:30

ご回答ありがとうございました．子要素はちゃんと親から指定していかないといけないのですね... ありがとうございました．

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

aタグのidをクリック時に取得したい．

関連した質問