頭の中は異空間

ものづくり中心

html動的編集後の要素にイベント追加するには

HTML JavaScript

どうも。

 

 

JavaScript(以降JS)でappend, prepend, after, before等でhtml要素を動的に追加/削除した場合に、その変更後要素に対してイベントを追加する時に困ることがあると思います。ajaxなんかもそうですね。

コード上はどう考えても動くはずなのに、どうなってんだ！となりやすい部分なので、解決しましょう。

 

通常書くJSはHTMLのページが読み込まれた後(ページ全体が読み込まれてから)実行されるコードになると思います。

jQueryを使ったコードで例を書いて見ると

$(function() {
  // ここに読み込み後のコード
});

大概はこんな感じでwindow.onload = functionと等価なコードの中で書くことになります。

要素に動的変更があった場合、ロード時とは異なるタイミングで読み込まれるので、上記コードでは拾えません。つまり、append等で、load時とは別に追加された要素は、コード上でそのままいじり倒すことは厳しいです。

 

そこでreadyの出番！

要素が読み込まれて使えるようになってからなら、そんな頑固な要素も触れることができます。

たとえば、

追加される要素.appendTo(追加先の要素)

に対して

~~(追加された要素).ready(function() {
  // ここに読み込み後のコード
});

とすれば、追加された要素が読み込まれたことが保証されたready()内でのコードで要素へアクセス可能です。

 

ajaxは？

ajaxは非同期、つまり読み込みタイミングは保証されませんよ、と言われているわけですから、readyでも拾えません。$.ajax内のsuccess, error, で拾います。通常はsuccess内です。

$.ajax({url: url,
  type: 'post',
  data: param, 
  success: function(data) {
    // ここにajax正常系のコード
  },
  error: function(e) {
    // ここにajax異常系のコード
  }
});

 

上記のようにsuccessかerrorの関数の中のコードが、ajaxによって書き換えられたhtml要素に対するアクセス方法です。

住所検索API等を作る場合に知っておく必要がありますね。個人的に住所検索周りの開発をしていてこのことを全く知らずに右往左往していて地獄を見たことがありますw

 

このように単にその言語のことだけでなくて、そもそもそのコードが動く仕組み(つまりコードの外の世界)を知って初めて理解できる内容もJSには含まれています。その点ではJSはC言語とちょっと似ているかもしれません。

 

ただ、readyに多量のイベントを登録するのは大変なので、

var events = function() {
  $("hogehoge").on('fuga', function() {
    foobar
  });
  ...
});

$("piyo").ready(function() {
  events();
});

これで、eventsに登録したすべてのイベントはreadyで拾えることになります。ただ、規模がデカくなってきたら、もっとセマンティックに関数を分けたほうが良さそうです。

 

 

今回はこの辺で。