質問: HTMLで作ったテーブルの中に、jqueryのajaxでphpよりデータベースを検索し、その結果をテーブルの中に子テーブルとして表示しています。 このとき、子テーブル内にはデータベースから検索したデータの一覧が表示され、各行には操作ボタンが一緒に作成されます。この作成されたボタンをクリックすることで別の領域にデータを転記、処理するのですが、そのとき、以下のような動作にしたいと考えています。 1)検索結果が表示されると同時に1番目のデータを転記する。 2)(1番目のデータが転記されていても)1番目のデータ以外のデータが望ましいと思うとき、該当の操作ボタンをクリックすることで該当のデータを転記、上書きする。 ※大半の場合はあらかじめ望ましいと思われるデータ順にSQL側で並べているため1番目のデータでよいのですが、例外的な選択が必要になる場合があり、その時に選択が必要になります。 1)のイベントを検知するのにon('DOMSubtreeModified propertychange')を使用して2)のイベントを検知するのには通常の.on('click')を使っています(中に作成されるボタンは名前属性で先に登録しています)。 on('DOMSubtreeModified propertychange')を使っている理由はこのテーブルは他の複数の入力パラメータが更新される都度更新されるためです。 2)だけの動作は問題なく、1)だけの動作も問題ないのですが、1)2)を両方実行させようとすると、(イベントタイプを見る限り)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(); //一番目のデータ以外に置き換えたいときの処理 }
回答: すみません。不在にしていてご返信遅くなりました。皆さんアドバイスいただきありがとうございます。 コードの掲載の仕方。知らなくてすみません。今後そのようにします。 clickオブジェクトもDomSubTreeModifiedで判定されているのは確かConsoleで.typeで確認したと思います。 それより回答で頂いた様にDomSubTreeModifiedを使わず、input要素を経由してchangeで検知すればよいだけだということに気づいていませんでした。 ありがとうございました。