jqueryのイベントオブジェクト分岐について教えてください

Question

HTMLで作ったテーブルの中に、jqueryのajaxでphpよりデータベースを検索し、その結果をテーブルの中に子テーブルとして表示しています。

このとき、子テーブル内にはデータベースから検索したデータの一覧が表示され、各行には操作ボタンが一緒に作成されます。この作成されたボタンをクリックすることで別の領域にデータを転記、処理するのですが、そのとき、以下のような動作にしたいと考えています。

１）検索結果が表示されると同時に1番目のデータを転記する。
２）（1番目のデータが転記されていても）1番目のデータ以外のデータが望ましいと思うとき、該当の操作ボタンをクリックすることで該当のデータを転記、上書きする。
※大半の場合はあらかじめ望ましいと思われるデータ順にSQL側で並べているため1番目のデータでよいのですが、例外的な選択が必要になる場合があり、その時に選択が必要になります。

１）のイベントを検知するのにon('DOMSubtreeModified propertychange')を使用して２）のイベントを検知するのには通常の.on('click')を使っています（中に作成されるボタンは名前属性で先に登録しています）。
on('DOMSubtreeModified propertychange')を使っている理由はこのテーブルは他の複数の入力パラメータが更新される都度更新されるためです。

２）だけの動作は問題なく、１）だけの動作も問題ないのですが、１）２）を両方実行させようとすると、（イベントタイプを見る限り）clickのイベントオブジェクトも'DOMSubtreeModified propertychange'と判定されているため、処理の分岐ができずにいます。

何かアドバイスはありますでしょうか？

$("#products").on('DOMSubtreeModified propertychange', function(event){
event.stopPropagation();
event.preventDefault();
//テーブルが更新されると一番目のデータを自動的に転記する処理
}

$("#products").on('click','[name="select_products"]',function(event){
event.stopPropagation();
event.preventDefault();
//一番目のデータ以外に置き換えたいときの処理
}

Comments

[kei344]

コードは少なくともAjaxの部分くらいまで提示できませんか？HTML要素がどうなっているかも有るとさらに回答しやすいと思います。また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[matobaa]

「clickのイベントオブジェクトも'DOMSubtreeModified propertychange'と判定されている」というあたりがちょっと怪しいな、と思ったのですが、そのように判断した根拠はありますか? クリックしてブレークポイントで止めてイベントを見たなど。

Answer 1

すみません。不在にしていてご返信遅くなりました。皆さんアドバイスいただきありがとうございます。
コードの掲載の仕方。知らなくてすみません。今後そのようにします。

clickオブジェクトもDomSubTreeModifiedで判定されているのは確かConsoleで.typeで確認したと思います。

それより回答で頂いた様にDomSubTreeModifiedを使わず、input要素を経由してchangeで検知すればよいだけだということに気づいていませんでした。

ありがとうございました。

Answer 2

DOMSubtreeModified propertychangeを使わない方法で「検索結果が表示されると同時に」を実現する方法を探すべきかと思います。現在の質問文のコードだけでは、どのような方法で#productsに追加しているのか不明なため、それ以上アドバイスできません。