formが複製されるのを感知したい

Question

Reactで複製されたformをアコーディオンメニュー化したいのですが、[Reactで複製されたform]が複製される際の挙動をjQueryでは感知できなくて詰んでいます。

$('.product_container').on("DOMSubtreeModified propertychange", function borro(){

 var n= 1;
	
	var new1 = $('.product_container').children('.product_cell').eq(n).children('.form');
  
  new1.children('.input_wrapper.type-selectbox').eq(2).after('<div class="input_wrapper accordion"></div>');
	
	new1.children(".accordion").text('詳細入力はこちら');
	
	new1.children('.input_wrapper:gt(5)').addClass('display_none');
	
	new1.children('.input_wrapper:gt(10)').removeClass('display_none');
	
	new1.children('.display_none').wrapAll('<div class="display_hidden"></div>');

$(function(){
  new1.children(".accordion").on("click", function() {
  		$(this).next().slideToggle();
  });
});

n++;


});

以下のように、複製される前に押すボタンの前にdivを噛ませてみたのですが、functionが発火することはありませんでした。

var $click = $('.add_item_btn').append('<div class="click"></div>');
$('.click').on("click",  function (){〜var n= 1;以下n++;まで〜}

Answer 1

デリゲートで対応できそうな気がします。

If selector is omitted or is null, the event handler is referred to as direct or directly-bound.

(略）

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

.on( events [, selector ] [, data ], handler )

意訳「セレクタが省略された場合、イベントハンドラはダイレクトと呼ばれます。（略）セレクタが指定された場合、イベントハンドラはデリゲートと呼ばれます。ハンドラはダイレクトにバインドされた要素では呼ばれず、セレクタにマッチする子孫（内部要素）で呼ばれます」

Comments

[Tomowe_kosaka]

ご回答ありがとうございます。
セレクタを描画される'.product_cell'にしてみたのですが、発火しませんでした。
ご面倒ですが、どのようにデリゲートを指定したら良いのか、お教え願えませんか？

[Lhankor_Mhy]

ご提示いただいてるソースだけだと確実なことはいえませんが、おそらく、
$(document).on('click', '.accordion', function(){...});
でいいのではないかな、と思います。

[Tomowe_kosaka]

ご回答ありがとうございます。
解決はできなかったのですが、新たな知見を得ることができました。
ありがとうございます。

[Lhankor_Mhy]

質問を変更されたのですね。
DOM変更の検知は、MutationObserver を使うといいかもしれませんね。

[Tomowe_kosaka]

やりたいことを細かくした結果、質問のタイトルと質問内容がズレていたので、修正させていただきました。
MutationObserver、使ってみます！ありがとうございます。