changeではできない?JavaScriptでdivの変更を監視する方法

この記事を書いてる人

オジー

  • WordPress歴8年
  • 副業でデザイン/開発を受託→法人化
  • WordPressで会社HPをオリジナルテーマで作成
  • 主軸はデザイン、たまにフロントエンドのコードも書きます
  • 事業会社/受託会社 両方経験あり

よくフォームでの値が変わったら〇〇という監視をするときにchangeを使うことがあると思いますが、divなどの中身が変更されたときに使用するのはご存知ですか? changeが使えればいいのですが、changeではdivの変更を受け取ることができません。そんなときはDOMSubtreeModified propertychangeを使用することで監視することができます。

今回はその使用方法を紹介したいと思います。

目次

コード

$(document).ready(function() {
    $('.div_change_lst').on('DOMSubtreeModified propertychange', function() {
        alert('removed');
    });
    $('.div_change_remove_btn').click(function() {
        $(this).parent().remove();
    });
});

div_change_lstに変化があったときにDOMSubtreeModified propertychangeの中のfunctionが実行されます。上記の場合だとalertでremovedと表示するようにしています。

削除ボタンの方は、div_change_remove_btnがクリックされたときに、クリックされたボタンの親要素、つまりdiv_change_itemremove()でDOM要素ごと取り除いています。

div_change_itemがDOM要素から取り除かれたら、div_change_lstに変化があったことになるので、alertが実行されるというコードになります。

まとめ

form要素に対してchangeで監視を行うことはよくあったのですが、divに対しての監視をするのは今回が初めてでしたので覚書として記事にしました。あまり使う機会はないと思いますが、参考にしくれれば幸いです。

では。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次