[opensocial-jquery:68] .htmlまたは.innerHTMLによって書き換えたhtmlのなかでのjQueryの使用

[ken]

kenと申します。長い件名で申し訳ありません。
お世話になります。

現在、mixi上でアプリを作っており、jqueryのプラグイン等が使いたくなり、
opensocial-jqueryを利用したのですが、どうしても解決できない問題があり、
お力を拝借したく投稿させて頂きました。

具体的には、
$("#toList").click(function(){

などでアクションを設定し、
document.getElementById("contents").innerHTML = obj;
として#contents内の中身を、コールバック関数によりobjに書き換えたのですが、

書き換えた先のhtml内で、jQueryが反応しません。
innnerHTMLの問題だと思い、$("#contents").html(obj);などjQueryを使ってhtmlを書き換えても、変化はな
いため、
これは仕様なのでしょうか？

念のため、prototypeを導入し、クリックなどはjQueryに任せ、
書き換える部分をprototypeで
$("contents").innerHTML = obj;
として同様のことをしてみましたが、これも反応せず、何も起こりません。

一応、書き換えた先のhtmlで、クリックして、.getなどによりリクエストが送れればよいのですが、
onclickを使わず、何か方法がありましたら、是非ご教授いただければと思います。

宜しくお願い致します。

[なかじまん]

こんにちは。なかじまんです。

> 書き換えた先のhtml内で、jQueryが反応しません。

とは、具体的に、どのようなことか、もう少し詳しく紹介して頂けないでしょうか?

* .innerHTML で書き換えた内容に script タグが含まれるのでしょうか?
* innerHTML で書き換えた内容のタグに onXxx が含まれるのでしょうか?

反応しないとは、何をした結果、どう反応しないか教えて頂ければ、何か分かるかもしれません。

[ken]

なかじまん 様,

kenです。ご返信ありがとうございます。

On 5月11日, 午後5:21, なかじまん <nakaji...@lrlab.to> wrote:
> こんにちは。なかじまんです。
>
> > 書き換えた先のhtml内で、jQueryが反応しません。
>
> とは、具体的に、どのようなことか、もう少し詳しく紹介して頂けないでしょうか?
>

分かりづらくて申し訳ありません。

> * .innerHTML で書き換えた内容に script タグが含まれるのでしょうか?
> * innerHTML で書き換えた内容のタグに onXxx が含まれるのでしょうか?
>
> 反応しないとは、何をした結果、どう反応しないか教えて頂ければ、何か分かるかもしれません。
>

少し長くなりますが、一通り説明致します。
まず
ガジェットXML側に

<p><a id="tostart" name="tostart">start shimasu</a></p>
と書いています。


$j("#tostart").click(function(){
$j.get("http://example.org/index.php?
action_Index=true", { user_thumb: user_thumb, user_id: user_id },
function(obj){
//alert("Data Loaded: " + obj);
if(obj){
//$("#contents").get(0).innerHTML(obj);
//$j("#contents").html(obj);

$("contents").innerHTML = obj;

//

document.getElementById("contents").innerHTML = obj;
}

});
});

jQueryとprototypeを共存させたので、少し汚くなってますが、#tostartをクリックしたときに、
id="contents"で描かれている範囲に、getでリクエストしたhtmlを描画するようにしています。

「index.php?action_Index=true」はsmartyで出力したtplによるhtmlですが、基本的には特に何の造作もない
htmlです。
そして、ここまでは無事に動き、#contents内にリクエストしたhtmlが描かれます。ここは問題ないです。
prototypeを入れなくても、jQueryだけで十分意図した動きになります。
jQueryを使わないinnerHTMLでも、jQueryの.htmlでも、prototypeを使ったinnerHTMLでも希望の動作はできま
す。


問題なのは次ですが、
このコールバックで返されるhtmlに
<div><a id="toList" name="toList"><img src="http://exaple.org/img/
enter.png" width="177" height="38"></a></div>
として、id="toList"で指定したaタグがあります。

そして、この#toListに対し、
$j("#toList").click(function(){
$j.get("http://example.org/index.php?
action_List=true", { user_id: user_id },
function(obj){
alert("Data Loaded: " + obj);
if(obj){
//$j("#contents").html(obj);

$("contents").innerHTML = obj;

//

document.getElementById("contents").innerHTML = obj;
}

});
});
というスクリプトを、適用させると、.clickが反応しないのです。他のjQueryのスクリプトも適用させてみましたが、特に何も反応しませんでし
た。
この#toListに対するスクリプトは、
$j("#tostart").click(function(){
が書かれたスクリプトと同じjsに記述しており、
$(document).ready(function() {
内で実行させても、その外で実行させても、何も反応がありません。


<div><a href="#" onclick="dispP('ACTION_LIST')"><img src="http://
exaple.org/img/enter.png" width="177" height="38"></a></div>
として、disP関数を実行する場合は、外部にあるJSファイルを読んで実行してくれるようですが、jQueryに関してはどうもうまくいきません。

jQueryの問題なのか、opensocial-jqueryの問題なのか分からず申し訳ないのですが、
もしご助言ありましたら、ご教授いただけると嬉しく思います。

宜しくお願い致します。


ken

[なかじまん]

こんにちは。なかじまんです。

$j("#tostart").click(function() { で、クリックイベントを登録していますが、
これは $("contents").innerHTML = obj; した後に、クリックイベントを登録していますでしょうか?

存在しないタグに対して、クリックイベントは登録できません。
というのが気にかかりました。はずしてたら、ごめんなさい。

[ken]

kenです。早速のご返信ありがとうございます。

On 5月11日, 午後6:36, なかじまん <nakaji...@lrlab.to> wrote:
> こんにちは。なかじまんです。
>

> $j("#tostart").click(function() { で、クリックイベントを登録していますが、
> これは $("contents").innerHTML = obj; した後に、クリックイベントを登録していますでしょうか?
>
> 存在しないタグに対して、クリックイベントは登録できません。
> というのが気にかかりました。はずしてたら、ごめんなさい。
>

一応そのようにはしている気がいたします。
contentsに書き換えてから、#toListに対するクリックイベントを登録ということですよね？
（勘違いしていたら申し訳ありません。）

ガジェットXMLが読みこんでいるJSの記述ですが、

$j(document).ready(function() {

$j("#tostart").click(function(){
$j.get("http://example.org/index.php?
action_Index=true", { user_thumb: user_thumb, user_id: user_id },
function(obj){
//alert("Data Loaded: " + obj);
if(obj){
//$("#contents").get(0).innerHTML(obj);
//$j("#contents").html(obj);
$("contents").innerHTML = obj;
//
document.getElementById("contents").innerHTML = obj;
}
});
});

$j("#toList").click(function(){
$j.get("http://example.org/index.php?
action_List=true", { user_id: user_id },
function(obj){
alert("Data Loaded: " + obj);
if(obj){
//$j("#contents").html(obj);
$("contents").innerHTML = obj;
//
document.getElementById("contents").innerHTML = obj;
}
});
});

}); // end of ready


として、//$j("#contents").html(obj);

$("contents").innerHTML = obj;

などで書き込んだ後に、新しいイベントを登録しています。
念のため、
$j("#toList").click(function(){
というイベントも、

$j(document).ready(function() {
の外に書くなどしたりして、試行錯誤してみましたが、どうもうまくいきません。


どうも挙動がおかしいなと思い、#toListのtplに対し、ガジェットxmlと同様のスクリプトを読みこませ、

ブラウザで
http://example.org/index.php?action_List=true
に直接アクセスし、試しましたが、
firebugのログをみると、
「gadgets is not defined」
と言われ、
http://example.org/index.php?action_List=true
に記述してある
<p><a id="toList" name="toList">enter</a></p>
に対して、何もアクションが起こりませんでした。

この場合は、innerHTMLなどによって置き換わったhtmlが問題なのではなく、
JSに書かれたクリックイベントに異常があると考えるべきなのでしょうか？


SNS上ではないので、opensocial-jqueryによるイベントが起きなくてもしょうがないのかなと思いますが、
もしこちらの勘違いでしたら申し訳ありません。

何卒宜しくお願い致します。

[ken]

度々すいません。kenです。
補足ですが、


ガジェットXMLにある、
<p><a id="toStart" name="toStart">start shimasu</a></p>
を
<p><a id="toList" name="toStart">start shimasu</a></p>
に変えて、クリックすると

#toListに対するイベントが起きましたので、#toListのクリックに対する記述は問題ないように思います。
もう少し考えられるところを当たってみます。

[なかじまん]

こんばんは。なかじまです。

紹介して頂いたソースコードは、次のとおりだと理解しています。

$j("#tostart").click(function() {
$j.get("...", { }, function(obj) {
$("contents").innerHTML = obj; // (1)
});
});

$j("#toList").click(function() { // (2)
});

だとしますと、(1) よりも (2) が先に実行されることになります。
Ajax で外部サーバからデータを取得するのは、非同期で時間がかかるため、
(1) が実行されたのち、(2) が実行されるとは、限らないように見えます。

[ken]

なかじまん さま,

kenです。お世話になっております。

On 5月11日, 午後9:44, なかじまん <nakaji...@lrlab.to> wrote:
> 紹介して頂いたソースコードは、次のとおりだと理解しています。
>
> $j("#tostart").click(function() {
> $j.get("...", { }, function(obj) {
> $("contents").innerHTML = obj; // (1)
> });
>
> });
>
> $j("#toList").click(function() { // (2)
>
> });
>

これで合っております。

> だとしますと、(1) よりも (2) が先に実行されることになります。
> Ajax で外部サーバからデータを取得するのは、非同期で時間がかかるため、
> (1) が実行されたのち、(2) が実行されるとは、限らないように見えます。
>

非同期であることをすっかり忘れていました。。。
onclickで関数を呼び出していたときは、その関数をsetTimeoutで0.5秒ほど遅らせていたのですが、
jQueryに変えてから、その対策を忘れておりました。。。

しかも、(1)と(2)をともに、$(function(){}で囲んでも、やはり(1)のあとに(2)が実行できるとは限らないようですね。

jQueryとsetTimeoutを合わせた書き方がまだ分かってないので、調べてみますが、
とりあえずは時間差の問題のようですので、一歩前進した気がします。

ajaxで、しかも.clickで同期を目指すのが正しいのかどうか分かりませんが、
もうちょっと頑張ってみます。

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

[ken]

kenです。お世話になっております。

On 5月12日, 午前12:26, ken <masu...@gmail.com> wrote:
>
> > $j("#tostart").click(function() {
> > $j.get("...", { }, function(obj) {
> > $("contents").innerHTML = obj; // (1)
> > });
>
> > });
>
> > $j("#toList").click(function() { // (2)
>
> > });
>

このコードに関してですが、動的に生成されたコンテンツに対して、.clickを有効にするため、

>
> 非同期であることをすっかり忘れていました。。。
> onclickで関数を呼び出していたときは、その関数をsetTimeoutで0.5秒ほど遅らせていたのですが、
> jQueryに変えてから、その対策を忘れておりました。。。
>

> jQueryとsetTimeoutを合わせた書き方がまだ分かってないので、調べてみますが、
> とりあえずは時間差の問題のようですので、一歩前進した気がします。
>
という問題はあるものの、
$("#toList").live("click", function(){
と言う形でlive関数を使い、あとで動的に生成されてもイベントが実行されるようにしました。
綺麗な解決かは分かりませんが、それでもonclickよりは少ない行数で、しかもロジックも分離できるので、
しばらくはこれで運用してみたいと思います。

もしまだ他にも案がありましたら、後学のためにもご教授頂けると嬉しく思います。
宜しくお願い致します。


ken

[なかじまん]

おはようございます。なかじまんです。

jQuery.fn.live メソッドなら、期待どおり動作しますね。

> もしまだ他にも案がありましたら、後学のためにもご教授頂けると嬉しく思います。

イベントの登録とそのイベント後の処理を、関数で分離しておけばよい... というようにも見えました。

var toList = function( ... ) {
}

$("#tostart").click(function() {
$.get(" ... ", function(obj) {
$("contents").html(obj).find('#toList').click(toList);
});
});

参考になれば、幸いです。

[ken]

なかじまん さま,

おはようございます。kenです。

On 5月12日, 午前9:10, なかじまん <nakaji...@lrlab.to> wrote:
> おはようございます。なかじまんです。
>
> jQuery.fn.live メソッドなら、期待どおり動作しますね。
>

そうですね。タイミングとか完全に無視していますが、一応動きますので、
とりあえずはよいかなと思いました。

> > もしまだ他にも案がありましたら、後学のためにもご教授頂けると嬉しく思います。
>
> イベントの登録とそのイベント後の処理を、関数で分離しておけばよい... というようにも見えました。
>
> var toList = function( ... ) {
>
> }
>
> $("#tostart").click(function() {
> $.get(" ... ", function(obj) {
> $("contents").html(obj).find('#toList').click(toList);
> });
>
> });
>

.findでID指定をし、その後にイベントの登録をするのですね。

クリックだと複数ページ続かなければいないような場合は3，4回同様の処理をしたいときもあるので複雑そうですが、
クリックした後に、クリックではない違う処理をするなど、2つほどの処理を連続で行うような状況が生じた場合は、
かなり便利そうです。

試してみたい処理がありますので、やってみます。
拙い質問であるにも関わらず、ご丁寧にご返信いただきありがとうございました。
また何かありましたら宜しくお願い致します。


ken