phpとajaxで読み込んだHTMLに対してのjqueryの動作について

Question

HTML内のボタンをクリックするとajaxでHTMLを生成し表示させるという動作があります。
その読み込んだHTMLに対してCSSは反映されるのですが、jquery・javascriptはまったく動作しません。
生成されたHTMLの中にselectフォームがあり、それを変更すると発火するというのが希望動作です。

$(function($) {
$("[class*='slcolor']").change(function() {
var str = $(this).val();
alert(str);
});
});

一応このようにしてみたのですがまったく動かずです。
なにか間違っている箇所または別の方法がございましたらご教授お願い致します。

Answer 1

結論としてはyambejpさんの方法でokですが、補足を。

$(function() { ... })はページが読み込まれたときに実行される処理です。ajaxの結果からページの一部を書き換えたときには実行されません。
また$("[class*='slcolor']").change(function() { ... });では、実行したときに指定セレクタに一致する要素が存在しないとイベントハンドラを登録できません。

それに対して$(document).on('change','[class*=slcolor]',function() { ... });は、ページを監視し続けて指定セレクタに一致する要素が追加されたときに自動的にイベントハンドラを登録してくれます。これならajaxの結果からページに追加された要素にも、イベントハンドラを登録することができます。

Comments

[enter_linx]

わかりやすく解説していただきありがとうございました。本当に勉強になります。

Answer 2

$(document).on('change','[class*=slcolor]',function() {

としてください

Comments

[enter_linx]

思い通りの動作ができました。ありがとうございました。