質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2734閲覧

jQueryのappendで追加した要素に対して、イベントを発生させたい

unwind

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/04 00:59

編集2021/02/04 01:06

実現したいこと

$.eachで回している時に、appendで追加した要素に対して、アコーディオンリストの自動開閉イベントを発生させたいです

発生している問題

$.eachで作成したアコーディオンリストの自動開閉がうまくいかないです。
$.eachで作成したアコーディオンリストをクリックすると、開いてすぐに閉じてしまいます。

該当のソースコード

html

1<div class="wrap"> 2 <h3 class="open_h3 btn-7">test1</h3> 3 <ul class="open_parent open-7"></ul> 4 <h3 class="open_h3 btn-7">test2</h3> 5 <ul class="open_parent open-7"></ul> 6 <!-- <h3 class="open_h3 btn-7">BRAND INFO</h3> 7 <ul class="open_parent open-7"></ul> --> 8</div>

javascript

1var li_1 = ""; 2for (var i = 1; i <= 5; i++) { 3 li_1 += "<li>項目" + i + "</li>"; 4} 5var array = ["A", "B"]; 6var append_parent = ""; 7var append_child = ""; 8 9$.each(array, function (index, val) { 10 $('ul.open_parent').each(function () { 11 append_parent = $('<li><h3 class="open_h3 btn-8">' + val + '</h3></li>'); 12 append_child = $('<ul class="open_child open-8">' + li_1 + '</ul>'); 13 $(this).append(append_parent); 14 $(this).children('li').append(append_child); 15 }); 16 17 // サブメニューを閉じる 18 append_child.ready(function () { 19 $('.open-8').hide(); 20 }); 21 22 // サブメニューの自動開閉 23 append_parent.ready(function () { 24 $('.btn-8').click(function () { 25 $(this).next('.open-8').slideToggle('slow').siblings('.open-8').slideUp('slow'); 26 $(this).siblings('.btn-8').removeClass('active'); 27 $(this).toggleClass('active'); 28 }); 29 }); 30}); 31 32 $('.open-7').hide(); 33 34 $('.btn-7').click(function () { 35 $(this).next('.open-7').slideToggle('slow').siblings('.open-7').slideUp('slow'); 36 $(this).siblings('.btn-7').removeClass('active'); 37 $(this).toggleClass('active'); 38 });

css

1.wrap { 2 width: 800px; 3 padding: 10px 20px; 4 border: 1px solid #000; 5} 6h3.open_h3 { 7 border-bottom: 1px dotted #a9a9a9; 8 cursor: pointer; 9 margin: 0; 10} 11.open_h3:after, 12.open_h3.active:after { 13 font-size: 22px; 14 margin-left: 20px; 15} 16.open_h3.active::after { 17 content: "▲"; 18} 19.open_h3::after { 20 content: "▼"; 21} 22.info { 23 font-size: 13px; 24} 25

試したこと

$.eachの外にappend_child.readyとappend_parent.readyを置いて実行してみました。
ですが、他のサブメニューをクリックしても、自動開閉が出来ませんでした。

どうかご助言を頂けたらと存じます。

また、多階層アコーディオンメニューの自動開閉で、addEventListenerを使って、
簡単に書くことが出来れば、そちらもご助言いただけたらと存じます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

イベントをhtmlに追加後に毎回addするか、documentからonでイベント付与してください。

動的に生成したDOM要素に対してjQueryでイベントを設定する場合

投稿2021/02/04 01:03

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unwind

2021/02/04 01:40

m.ts10806様 コメント頂きありがとうございます。 javascriptの部分で、 $(document).on("click", ".btn-8", function () { $('.open-8').hide(); $(this).next('.open-8').slideToggle('slow').siblings('.open-8').slideUp('slow'); $(this).siblings('.btn-8').removeClass('active'); $(this).toggleClass('active'); }); と書きましたら、自動で開閉が出来ました。ありがとうございます。 そこで、閉じるときのアニメーションが無くなってしまったのですが、 閉じるときのアニメーションを設定するものも、document.on("load", "open-8", function(){}); の中に記述すればよろしいでしょうか。 宜しくお願い致します。
m.ts10806

2021/02/04 01:46

理論がわかればあとは色々やってみることです。
unwind

2021/02/04 01:48

m.ts10806様、承知しました。 お手数かけていただき、ありがとうございます。
guest

0

ベストアンサー

jQueryっぽくかくならこんな感じ?

javascript

1$(function(){ 2 var child=$('<ul class="open_child open-8">') 3 for(var i=1;i<=5;i++){ 4 child.append($('<li>').text('項目'+i)); 5 } 6 var array = ["A", "B"]; 7 $('.open_parent').append($.map(array,function(val){ 8 return $('<li>').append($('<h3 class="open_h3 btn-8">').text(val)).append(child.clone()); 9 })); 10 $('.open_h3').on('click',function(){ 11 $(this).next('ul').slideToggle(); 12 }).next('ul').hide(); 13});

投稿2021/02/04 01:40

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/02/04 01:41

あとは細かい挙動の説明がされてないのでご自身で調整下さい
unwind

2021/02/04 01:50

yambejp様、jQueryの部分をわかりやすくしていただき、ありがとうございます。 細かい挙動については、適宜修正していこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問