ajaxでインクルードしたhtmlにjQueryが効かない

Question

以下のような記述で、
外部ページのhtmlをajaxでインクルードして、
そのhtmlにjQueryを実行したいのですが、正常に動作しません。

<script>
//ajaxでインクルード処理
$(function() {
	$.ajax({
		url: '/hoge/',
		cache: false,
		success: function(html){
			$(html).find('.content').each(function(){
				$('#content').html($(this).html());
				return false;
			});
		}
	});
});
//実行したいｊQuery
jQuery(function($){
$('.list').autoHeight({column:4});
});
</script>
<div id="content"></div>

.load での解決例はみつかったのですが、ajaxでhtmlを部分的にインクルードしたく、
ajaxでもそのような処理は、可能なのでしょうか？

Comments

[kei344]

autoHeightは呼び出し元で読み込まれていますか？呼び出し先ですか？

[momo_monom]

呼び出し先です。

Answer 1

success 内で設定でいいかと
基本

$(selector) 

は現存するオブジェクトにしか効果はありませんから

Comments

[momo_monom]

success 内に記述してみたのですが、正常に動きませんでした。。。

Answer 2

実行順の問題です。ajaxのsuccessは非同期に（取得完了時に)実行されるものですから、そちらが後に実行されています。

//ajaxでインクルード処理
$(function() {
    $.ajax({
        url: '/hoge/',
        cache: false,
        success: function(html){
            $(html).find('.content').each(function(){
                $('#content').html($(this).html());
                return false;
            });
            //実行したいｊQuery
            jQuery(function($){
              $('.list').autoHeight({column:4});
            });
        }
    });
});

ここで実行すれば想定どおり動くはずです。

Comments

[momo_monom]

ありがとうございます。試してみたのですが、期待通りに動きませんでした。。。
jQueryAutoHeight.js を外部ファイルで読み込んでいるのですが、こちらがなにか関係していますでしょうか？

[momo_monom]

以下のように記述したら正常に動きました！
文法的に問題ないでしょうか？

//ajaxでインクルード処理
$(function() {
$.ajax({
url: '/hoge/',
cache: false,
success: function(html){
$(html).find('.content').each(function(){
$('#content').html($(this).html());
return false;
});

//実行したいｊQuery
$.getScript("/jQueryAutoHeight.js", function(){
jQuery(function($){
$('.list').autoHeight({column:4});
});
});

}
});
});

Answer 3

autoHeightを呼び出し先（ajaxでインクルードしたファイル）に書いているなら、実行されません。
呼び出し元（ajaxが書いてあるファイル）でautoHeightを読み込んでいれば他の回答者さんのコードが動くと思いますよ。