質問: jQueryを用する上では基本的な事かもしれませんが、質問させていただきます。 あるサイト、はっきり言ってしまうと、ヤフーの「トリプル」というサービスなのですが、jQueryと、それを利用する画像スライダ、jquery.bxslider を設置してもうまく動作しません。 スライダの「送り」や「戻り」をクリックすると、「ファイルがありません」という404エラーのような表示になります。 理由をいろいろ考えたのですが、どうも戻り処理(?)がうまくないような気がします。 まず、通常のHTMLで、Aタグなどにより移動先がある場合、そのリンクにマウスカーソルをホバーの状態で置くと、リンク先の情報などがブラウザの下部(Firefoxだとステータスバー)に表示されると思います。 ところが、jQueryと、jquery.bxslider によって作られた移動先部分にマウスをホバーさせても、そのページがあるディレクトリを示すのみで、どこに移動しているのか判りません。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f3cda914eb55a1fbb9fe5b3e888fcfe8.jpeg) この場合設置先は、になるのですが、スライダーの<にマウスを置くと、設置URLそのものがステータスバーに表示されます。 この場合、例えばスライダーの「送り」や「戻り」が選択された という情報は、どこに格納されて送られているのでしょうか? 予想として、この戻りURLがディレクトリまでしか表示していないため、ヤフートリプルのサーバでは、どこに戻したら良いのかがわからず、不明になっているのではないかと思っています。 この部分で、戻るファイルまで指定できれば、エラーが回避出来るのではないかと思うのですが... よろしくお願いいたします。
回答: サンプルのhttp://8-dai.com/jQuery/では、正常に動作しているようですが・・・ 確かに、jquery.bxslider.jsの内部を見ると、populatePager()の処理で ``` 1 ``` と、`href=""` (ここでは、`http://8-dai.com/jQuery/`)にリンクしているように見えます。 しかしながら、このa要素にクリックイベントをバインドして、そのイベントハンドラ内に`e.preventDefault();`として、その後の通常のイベント「`http://8-dai.com/jQuery/`へのリンクをクリック」はキャンセルされています。 この、サンプルでは、エラーが再現できないのでここまでしかわかりません。 しかし、 > > ヤフートリプルに限って、「ファイルがありません」という404エラーのような表示 > > > という問題がある以上、イベントの伝搬はキャンセルされていないことから、全くの推論ですが、bxスライダーのある部分よりも、**DOM上の先祖階層**に何かあるとしか思えません。 ブラウザのF12開発者モードか何かで、このヤフートリプル環境での**DOM上の先祖階層**を確認すれば、もしかしたら何かわかるかもしれません。 もし、このイベントの伝搬が原因なら、以下のスクリプトを試してみてください。 ``` onSliderLoad : function() { timeout_id = setTimeout(null, 10000); // bxsliderのスライドロードイベントに追加 $(".bx-wrapper").on("click", function(e) { e.stopPropagation(); }); }, ```