2

私は jQuery の UI タブを使い始めました。ほとんどの場合うまく機能しますが、いくつか問題がありました。タブを切り替えると、そのタブに戻ると一部の項目の機能が失われます。そのため、私はそれをすべて正しく構造化しているかどうか疑問に思いました。Googleで検索しても何も出てこなかったので、ここで質問することにしました。

問題は、タブ + AJAX を介して取り込んでいるページがあり、それらの新しいページに jQuery を使用したい機能がある場合、その jQuery をどこに配置すればよいかということです。現在の私の構造は次のとおりです。

タブのあるページ: main_page.php このページには 2 つのタブがあります。1 つは AJAX 経由で「page1.php」を取り込むもので、もう 1 つは「page2.php」を取り込むものです。

page1 には、jQuery を使用する独自の要素があります。その jQuery コードはどこに行くのでしょうか? それは main_page.php にあり、それとも page1.php にありますか?

今は page1 に置いていますが、これは正しいと思いますが、他の問題が発生しているので、それが正しいかどうかを再確認したかっただけです。

4

1 に答える 1

1

すべての JavaScript を別の .js ファイルに入れてください。データ (html)、プレゼンテーション (css)、動作 (javascript、flash...) を分離します。アプリケーションのメンテナンスとスケーリングが容易になります。あなたといつかそれを維持しなければならないかもしれない他の人々。

あなたの問題に関して:タブを切り替えるため、新しく読み込まれたコンテンツには動作が関連付けられません。なんで？最初にページをロードして JavaScript をロードすると、DOM の現在の状態 (必要に応じて HTML 構造) にのみ適用されます。別のタブをクリックすると、ajax を介してコンテンツが読み込まれるため、ページは更新されません。つまり、この新しいコンテンツにはその JavaScript が適用されません。最初の場所。したがって、2 つのオプションがあります。

  • ロードした html (その後) とともにその JavaScript を挿入します。それは悪い習慣ですが、うまくいきます。
  • jquery live()関数を使用してイベントをバインドします。それは正しい選択です。

live() を使用すると、動作は常に DOM 要素に関連付けられます。

だから代わりに

$('#myel').bind('click',dothis());

あなたがやる

$('#myel').live('click',dothis());

このように、どのタブが表示されていても、そのコンテンツは機能にバインドされ、再度アタッチする必要はありません。

于 2009-08-04T16:21:23.800 に答える