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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

Q&A

0回答

1861閲覧

PHP+Ajaxで外部のモーダルウインドウjsを導入→jQueryのload後に動かない

manju_tarou

総合スコア6

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2018/03/21 14:15

前提・実現したいこと

現在、PHP+Ajax(jQuery)で、slackライクなインターフェースの掲示板を作成しようとしています。
この掲示板ではコメント入力の他に、悪質なコメントがあれば、一般のユーザーが該当コメントを任意で個々に非表示できる仕組みを持つ形です。

ここでnifty modal window effectsというモーダルウインドウのアニメーションjsがあったので、これを導入し、コメント入力前の確認画面と、非表示操作前の確認画面をモーダル画面でアニメーション表示しようと考えています。

大雑把な画面構成としては、「1.既に入力されたコメントの表示部」を上段、「2.コメントの入力部(テキストエリアとボタン)」を下段に配置しています。

ここにモーダルウインドウのアクションをつけます。
1.コメント表示部の各コメントの脇に「✕非表示」と言うリンクをつける。
非表示にする際、ユーザーにこのリンクをクリックしてもらい、リンククリック時にjQueryでイベントハンドリングして、非表示確認用のダイアログを出す。
2.コメント入力部にSubmitボタンをつける。
このSubmitボタンクリック時にjQuery側でイベントハンドリングをし、コメントの入力内容の事前確認ダイアログを出す。

実装してみたところ、上記の1,2ともに、個々の操作では、上手く動いています。

なお、コメントを入力→Submitボタンクリック→確認モーダルで確認ボタンクリックでコメントを書き込んだあと、jQueryのload機能で、画面更新なしでコメント一覧を、表示されているコメントを、新しく読み込んだコメントに全部置き換える方式で更新しています。

コメント送信機能、更新表示機能ともに、正常に動作しています。

発生している問題・エラーメッセージ

上記のコメント入力・コメント非表示のそれぞれ単独同士の動きだと上手く動きます(非表示リンククリックも、コメントSubmitボタンクリックも、アニメーションでモーダルウィンドウが起動する)。
ただ、コメントを入力した後に、別のコメントを非表示にしようとすると、イベントを拾ってくれず、アニメーションのモーダルウィンドウが起動しません。

※エラーメッセージはありません。

該当のソースコード

コメント投稿とコメント取得・表示部:

javascript

1$(document).ready(function(){ 2 3 $('#btnSendComment').click(function(){ 4 CommentsendData(); 5 $('textarea').val(""); 6 }); 7}); 8function CommentsendData() { 9 $.post( 10 'post_Comment.php', 11 { 12 'txtaComment': $('textarea[name="txtaComment"]').val(), 13 }, 14 function(data){ 15 CommentgetData(); 16 } 17 ); 18} 19function CommentgetData() { 20 $("#commentZone").load("get_Comment.php" , {bid:"123",bpage:"1"}); 21 $('#commentZone').show(); 22} 23

ModalEffects 本体:

javascript

1var ModalEffects = (function() { 2 function init() { 3 var overlay = document.querySelector('.md-overlay'); 4 [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el,i){ 5 var modal = document.querySelector('#' + el.getAttribute('data-modal')), 6 close = modal.querySelector('.md-close'); 7 8 function removeModal( hasPerspective ) { 9 classie.remove( modal, 'md-show' ); 10 if( hasPerspective ) { 11 classie.remove( document.documentElement, 'md-perspective' ); 12 } 13 } 14 15 function removeModalHandler() { 16 removeModal( classie.has( el, 'md-setperspective' ) ); 17 } 18 19 el.addEventListener( 'click', function( ev ) { 20 classie.add( modal, 'md-show' ); 21 overlay.removeEventListener( 'click', removeModalHandler ); 22 overlay.addEventListener( 'click', removeModalHandler ); 23 if( classie.has( el, 'md-setperspective' ) ) { 24 setTimeout( function() { 25 classie.add( document.documentElement, 'md-perspective' ); 26 }, 25 ); 27 } 28 }); 29 30 close.addEventListener( 'click', function( ev ) { 31 ev.stopPropagation(); 32 removeModalHandler(); 33 }); 34 } ); 35 } 36 init(); 37})();

試したこと

相談する前に代替策を実施しておくべきなのですが、既に手詰まりのため試行できることが実施できておりません。

補足情報(FW/ツールのバージョンなど)

今立てている作業仮説としては、導入した「nifty modal window effects」が、
el.addEventListener( 'click', function( ev )
などでクリックイベントを拾っており、
$(div_name).load("load.php",load_param);
でひょっとしたらコメント入力後に対象DOM要素が書き換わると、addEventListenerで指定したものを拾わなくなるのではないかということです。

これの解決法として、
$("div").click(function() {

$(document).on('click', 'div', function() {
があるのですが、
対象のModalEffects内では、イベントリスナーにaddEventListenerで二回イベントを加えているので、$(document).onの形式にすると最後に適用したものだけが反映されてしまうのでNGだと考えています。

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

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

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

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

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

kei344

2018/03/22 00:02

「二回イベントを加えている」とはコードのどの部分のことでしょうか。
manju_tarou

2018/03/23 14:29

ご質問ありがとうございます。本件見間違えていました。誤記申し訳ありません。二回イベントは加えていないです。
kei344

2018/03/25 23:43

$(document).onでできませんか?また、HTMLも提示してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問