人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryによるajax読み込み時のイベントについて

現在、jQueryのjScrollPaneというjsファイルを使用しまして、カスタムスクロールバーの表示をしたいと思っております。
さて、サンプルのhtmlファイルを下記の様に作成しました。
http://webmaster.main.jp/test/3/3.htm

「ajaxで読み込む」ボタンをクリックするとajaxを利用して、テキストファイルを読み込みます。
ここで質問なのですが、ajaxで読み込んだ後にjavascriptイベントを読み込んだテキストファイル内に記述された要素に適用させるにはどのようにしたら良いのでしょうか?
「ページ読み込み時」のようなスクロールバーを「ajax読み込み時」でも再現したいと思っております。
回答のスクリプトコードを書いていただければと存じます。

●質問者: nagato-yuki
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●100ポイント
$("p.show").load("./sample1.txt");

を、こんな感じでどうでしょうか?

$("p.show").load(
 "./sample1.txt",
 null,
 function(responseText, status, XMLHttpRequest) {
 $('.scroll-pane').jScrollPane({
 showArrows: true,
 scrollbarWidth: 15,
 arrowSize: 16 
 });
 });

最初から表示されてる方と、id が被ってるので、クラスのセレクタに変えてますけど、
ポイントは、load メソッドの callback を使うってことで。
http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/


nagato-yukiさんのコメント
ご回答ありがとうございます。 callbackを使うことがポイントですね!とても参考になります。 実際にコードを書き換えてみたところうまく動作できました。 今回はご教授いただきまして誠にありがとうございました。

2 ● Cherenkov
●100ポイント ベストアンサー

回答1とほとんど同じですが、セレクタの第二引数にthisを付けることで元々あった.scroll-paneを除外しています。

$("p.show").load("./sample1.txt", function() {
$(".scroll-pane", this).jScrollPane({
showArrows: true,
scrollbarWidth: 15,
arrowSize: 16 
});
});

nagato-yukiさんのコメント
ご回答ありがとうございます。 thisを使用しての完結的なコードで、とても参考になりました。 実際にコードを書き換えてみたところ、うまく動作できました。 今回はご教授いただきまして誠にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ