質問: $(this).attr('href').slice(1); $('[data-modal="' + trigger + '"]').css('display','block'); $('.is-overlay').fadeIn(300);//ここまでは動いている }); $('.is-overlay').click(function(){ alert('aaa'); //動いていない }); ``` ### SCSS ``` html { &.is-modal { overflow: hidden;//モーダル起動時、背景は固定 } } .is-overlay {//モーダルの背景部分 display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(#000,.7); z-index: 1000;//header固定でz-indexを使っているので } .c-modal { &-wrap { display: table!important; width: 100%; height: 100%; } &-container { display: table-cell; vertical-align: middle; &__inner { background: #ffffff; max-width: 700px; margin: 0 auto; } } } ``` 個人的には、他の部分が干渉しているか、見落としている部分があるのではと考えています。 そのほかのhtmlやcss部分をこちらに提示することは難しい為、 情報が限られた中大変恐縮ではございますが、 もし何かお分かりになるかたがいらっしゃいましたら ヒントをいただければ幸いです。 宜しくお願いいたします。
回答: ### 動かない ``` $('.is-overlay').click(function(){ alert('aaa'); }); ``` ### 動いた ``` $(function(){ $('.is-overlay').click(function(){ alert('aaa'); }); }); ``` 参考: 個人的な推測ですが、モーダルが生成される前に処理を発火させてしまっていたから .is-overlayを取得できていなかったことが原因なのかなと考えています。 (※間違っているかもしれません。) ご覧いただきありがとうございました。