動的に追加したdiv要素のonloadを取得、またはその代替手段が知りたい

###前提・実現したいこと
動的に追加したdiv要素の読み込み完了イベントを取得し、処理を追加したい

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

動的に要素を追加し、その追加の読み込みが終わったタイミングでalertを発信したい。
しかし動的に追加した要素の読み込み直後のタイミングでは要素の追加がなされておらず、
functionが呼ばれた後になって初めて追加した要素が有効になる。
追加した要素の読み込み完了タイミングのイベントが欲しいが、
該当の要素はdivであり、loadイベントが発生しないため、代替の手段が知りたい。

###該当のソースコード

html
1<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
2<a href="javascript:;" onclick="lockScreen()">二度押し防止</a>
3<script type="text/javascript">
4    function lockScreen() {
5        var container = $(document.createElement('div'))
6        $('body').append(container);        
7        container.attr('class','divhide')
8        container.attr('id', 'forhide')
9        container.css("z-index", "999")
10        container.css("position", "absolute")
11        container.css("top", "0px")
12        container.css("left", "0px")
13        container.css("right", "0px")
14        container.css("bottom", "0px")
15        container.css("background-color", "gray")
16        container.css("opacity", "0.8");
17        alert("このタイミングですでに暗転済みであってほしい");
18    }
19</script>

###試したこと
containerのloadイベントを取得しようとするも、divにはonイベントはないとのこと。
refreshやreloadのようなイベントを探したが見つからず。
上記functionはlockScreenとalertを別functionに設定しても同じ結果となってしまう。

###補足情報(言語/FW/ツール等のバージョンなど)
chrome,mac,jquery1.7,html5,css3

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

回答5件

非同期処理のようなので、0秒のwaitを並行してかけてみると良いかもしれません

HTML
1<script>
2function wait(sec) {
3    var d = $.Deferred();
4    setTimeout(function(){d.resolve();}, sec * 1000);
5    return d.promise();
6}
7$(function(){
8  $('#hoge').on('click',function(e){
9    $.when(
10      $('<div>')
11      .addClass('divhide')
12      .attr('id', 'forhide')
13      .css({"z-index":"999","position":"absolute","top":"0px","left":"0px","right":"0px","bottom":"0px","background-color":"gray","opacity":"0.8"})
14      .appendTo($('body')),wait(0)
15      ).done(function(){
16        alert('このタイミングですでに暗転済みであってほしい');
17      });
18  });
19});
20</script>
21
22<a href="#" id="hoge">二度押し防止</a>
23

ちなみにclassをつけるならaddClass()したほうがよいですし
classを付加したなら、cssをダイレクトにかきかえずcssで指定したほうがよいでしょう

投稿2016/11/24 08:33

yambejp

総合スコア118164

takanori222

2016/11/24 08:39

解答ありがとうございます。こちらでも動作を確認することができました。その他部分までリファクタリングをしていただきましてありがとうございます。

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

コメントだとソースが貼れないので改めて。
暗転が一度しかできないというのは、別に setTimeout だからということではなく
暗転解除の方法とかに問題があったりしないですかね…？

あと、そう関数名が lockScreen となっていたので気になっていたのですが、
複数の機能から lockScreen を呼び出すのであれば、以下のように function を渡す形になるのかなあと思うのですが、どうでしょうか。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
    function test01() {
        lockScreen(function() {
            alert("TEST01 がクリックされました！");
            var output = document.getElementById("output");
            output.innerHTML = "TEST01 !!";
        });
    }

    function test02() {
        lockScreen(function() {
            alert("TEST02 がクリックされました！");
            var output = document.getElementById("output");
            output.innerHTML = "TEST02 !!";
        });
    }

    function test03() {
        lockScreen(function() {
            // alert なし
            var output = document.getElementById("output");
            output.innerHTML = "TEST03 !!";
        });
    }


    function lockScreen(func) {
        var container = $(document.createElement('div'));
        $('body').append(container);        
        container.attr('class','divhide');
        container.attr('id', 'forhide');
        container.css("z-index", "999");
        container.css("position", "absolute");
        container.css("top", "0px");
        container.css("left", "0px");
        container.css("right", "0px");
        container.css("bottom", "0px");
        container.css("background-color", "gray");
        container.css("opacity", "0.8");

        setTimeout(function() {
            func();             // 引数で渡されたfuncを実行
            container.remove(); // フィルタを削除
        }, 0);
    }
</script>
</head>
<body>

  <a href="javascript:void(0);" onclick="test01(); return false;">TEST01</a>
  <a href="javascript:void(0);" onclick="test02(); return false;">TEST02</a>
  <a href="javascript:void(0);" onclick="test03(); return false;">TEST03</a>

  <div id="output"></div>

</body>
</html>

あと、これは最初の回答でも書きましたが、戻り値を返す必要がある場合はこのままだと駄目だと思います。

解決しないようなら、改めて質問を立て直して
その「暗転が解除されないソース」を貼ると良いかなと思います。

投稿2016/11/25 02:37

sk_3122

総合スコア1126

takanori222

2016/11/25 06:29

すみませんありがとうございました。質問を立て直すことにいたします。

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

こんな感じのことがしたいのでしょうか。
Pure JavaScript と jQuery の記法が混在していたので、jQuery に統一しています。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>title</title>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	</head>
8	<body>
9		<div>
10			<a id="btn_lock" href="javascript:;">二度押し防止</a>
11		</div>
12
13		<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
14		<script type="text/javascript">
15			$(function () {
16				function lockScreen() {
17					$('<div>').attr({
18						class: 'divhide'
19						, id: 'forhide'
20					}).css({
21						zIndex: 999
22						, position: 'absolute'
23						, top: '0px'
24						, right: '0px'
25						, left: '0px'
26						, bottom: '0px'
27						, backgroundColor: 'gray'
28						, opacity: 0.8
29					}).on('MyEvent', function () {
30						alert('MyEvent');
31					}).appendTo($('body')).trigger('MyEvent');
32				}
33
34				$("#btn_lock").on('click', function () {
35					lockScreen();
36				});
37			});
38		</script>
39	</body>
40</html>

投稿2016/11/24 08:49

編集2016/11/24 09:04

退会済みユーザー

総合スコア0

takanori222

2016/11/24 09:07

解答ありがとうございます。しかしMyEventのアラート時に画面が暗転していないようです。

退会済みユーザー

2016/11/24 09:11

こちらでは }).on('MyEvent', function () { alert($('#forhide').length); // こうすると、ちゃんと1になりますよ。

takanori222

2016/11/24 09:17

こちらではMyEventのダイヤログメッセージが表示された直後に暗転されております。何か手順に間違いがあるかもしれませんので確認いたします。

退会済みユーザー

2016/11/24 09:22 編集

単純に、見た目の問題はマシンのグラフィック性能によって左右されるので、そこにこだわる必要なないと思いますよ。見た目（演出）の都合ということなら、setTimeout を利用すれば済むことなので。

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

ベストアンサー

アラートを出すタイミングで、フィルタがかかっている状態になってほしいということでしょうか。

以下でそんな感じの挙動にはなりますが、lockScreen が戻り値を返す必要があったりする場合は
このままだとうまくないと思います。

function lockScreen() {
    var container = $(document.createElement('div'))
    $('body').append(container);        
    container.attr('class','divhide')
    container.attr('id', 'forhide')
    container.css("z-index", "999")
    container.css("position", "absolute")
    container.css("top", "0px")
    container.css("left", "0px")
    container.css("right", "0px")
    container.css("bottom", "0px")
    container.css("background-color", "gray")
    container.css("opacity", "0.8");

    // 非同期処理
    setTimeout(function() {
        alert("このタイミングですでに暗転済みであってほしい");

    }, 0);
}

とりあえず一例として。 refresh とかないんですかね。

投稿2016/11/24 08:17

sk_3122

総合スコア1126

sk_3122

2016/11/24 08:22

あと、所々セミコロンとかが無いのは大丈夫です？サンプルだから荒いだけですかね？まあ動きはしましたけど。

takanori222

2016/11/24 08:23

ありがとうございます！これで方向性が掴めました。 divにもrefreshやonloadが欲しいですねー

takanori222

2016/11/24 08:30

セミコロンが抜けてるのは失礼しました元がtypescriptなので、jsとしてコードが荒くなってるかもしれませんw

takanori222

2016/11/24 09:23

うーむ、同じ画面で同じボタンを押下した場合に暗転が有効にならないです。。。こちらsetTimeoutが画面で一度だけしか呼ばれないことが原因なのだと思います。

sk_3122

2016/11/24 09:57 編集

> setTimeoutが画面で一度だけしか呼ばれない？ setTimeout の仕様的にということですか？そんなことはないと思いますが… setTimeout() に似ているもので setInterval() というのもあり、この 2 つはよく一緒に紹介されていたりします。 setTimeout(処理, 2000) ････『 2 秒後に一度だけ実行』 setInterval(処理, 2000) ･･･『 2秒ごとに実行』この 2 つの違いを説明する為に、よく「setTimeout は指定時間後に一度だけ実行されます」というような説明がされます。ただ、これは一度の呼び出しで一度だけ実行されるというだけで、もう一度 setTimeout が呼ばれればまたもう一度実行されます。暗転が有効にならないとしたら、別のところに原因があるかもしれませんね。

takanori222

2016/11/25 02:01

すみません、おそらく書き方が悪かったです。今やりたいことは、下記の通りです。「特定のボタンが押下されて処理を待っている間、画面を暗転させてボタンやaタグをクリック不可能にする。処理が完了後、暗転はなくなり、かつボタンやaタグを押下できるようにするただしangularJSとtypescriptでの実装であるためにjqueryのプラグインを利用することは出来ず、かつangularJSのプラグインも利用不可能。jqueryは機能を制限されたものを利用可能」という状況です。現在の問題点は、「複数のボタンが存在しており、一つ目のボタンでは暗転が有効になり、処理終了後に暗転が無効になるようにはなったものの、その状態で二つ目のボタンを押下すると暗転が有効にならない」という点です。

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

描画が終わったタイミングと合うかどうかは自信がないのですが……

対象ノードの子ノード（テキストノードも含む）に対する追加・削除を監視する場合は true にします。
MutationObserver - Web API インターフェイス | MDN

投稿2016/11/24 07:42

Lhankor_Mhy

総合スコア37634

takanori222

2016/11/24 08:08

下記のソースでもダメでした。 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <a href="javascript:;" onclick="lockScreen()">二度押し防止</a> <script type="text/javascript"> function lockScreen() { var container = $(document.createElement('div')) $('body').append(container); container.attr('id', 'forhide') container.css("z-index", "999") container.css("position", "absolute") container.css("top", "0px") container.css("left", "0px") container.css("right", "0px") container.css("bottom", "0px") container.css("background-color", "gray") container.css("opacity", "0.8"); // 対象ノード const target = document.getElementById('forhide'); // オブザーバーインスタンス準備 const observer = new MutationObserver((mutations) => { alert("このタイミングですでに暗転済みであってほしい"); }); // オブザーバーの監視対象の設定 const config = { attributes: true //対象ノードの属性の監視を有効にする }; //対象と設定を渡す observer.observe(target , config); // このタイミングでイベントが発生して欲しい container.attr('class','divhide') // 後ほど、監視を中止 observer.disconnect(); } </script>

takanori222

2016/11/24 09:23

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

あなたの回答