前提・実現したいこと
現在、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だと考えています。
あなたの回答
tips
プレビュー