1

初心者。いくつかのタブがあり、タブごとにコンテンツがテキストファイルから動的に読み込まれます。したがって、各タブをクリックすると、そのタブのコンテンツを含むテキストファイルが読み込まれます。

$('#thisMainTabs').tabs({selected:0});

<div id='thisMainTabs'>
<ul>
<li><a href='/scripts/thisMainTabs1.txt'>Tab 1 Content</a></li>
<li><a href='/scripts/thisMainTabs2.txt'>Tab 2 Content</a></li>
<li><a href='/scripts/thisMainTabs3.txt'>Tab 3 Content</a></li>
<li><a href='/scripts/thisMainTabs4.txt'>Tab 4 Content</a></li>
<li><a href='/scripts/thisMainTabs5.txt'>Tab 5 Content</a></li>
</ul>
</div>

それが私が思うのと同じくらい基本的です。これらのタブのいくつかには、非常に基本的なjQueryボタンがあります。

準備ができたドキュメント内：

$('#btnNumber1').button({icons: {primary: 'ui-icon-circle-plus' secondardy: null} });

$('#btnNumber1').click(function () {
     alert('working');
});


<div id='btnNumber1'>add new<div>

例として、私はこれらのアラートを使用しましたが、実際にはこれらのものはダイアログを開きます（ええ、jqueryダイアログも）。何が起こっているように見えるかというと、最初に選択したときに各タブがボタンをレンダリングして機能しますが、タブに戻ると、ボタンはそこにありますが、クリックしても何もしません。ダイアログなのかボタンなのかわからない？しかし、すべてが最初から機能します。

私は新しいので、これについての助けに大いに感謝します。ありがとう！

編集：もう少しいくつかのことを明確にすべきでした。謝罪。

したがって、上記の.tabs（）と#thisMainTabsは、メインページのコンテンツに含まれる唯一のものです。デフォルトのタブコンテンツを除いて...実際にはテキスト以外は何もありません。他の各タブ（さらに約5つあります）には、テキストファイルへのリンクを指すhrefがあります。これらのテキストファイルのそれぞれには、そのタブのコンテンツ（マークアップ、js、cssなど）が含まれており、それぞれに$（document）.ready ....があります。これはちょっと奇妙なアイデアですが、他のすべてのファイルではそう思われます働くために?? もう一度初心者を主張します:)。つまり、アコーディオン、ボタン、ダイアログ（すべてjQ）があり、上記の動作に気付くまで、すべてが正常に機能していました。初めて各タブを選択すると、コンテンツが読み込まれ、ボタンが表示され、クリックすると機能します（ほとんどはダイアログです）。タブを切り替えて、そのタブが最初にクリックされる限り、それらはすべて機能します。

ただし、タブに戻ると、ボタンはありますが、何もしません。

上記の例は、すべてのボタンをボタンと見なして使用し、クリック機能を設定する方法の例です。これらのそれぞれは、各タブの各テキストファイルの準備ができているドキュメントにあります。すべてが一意であることを確認するために、すべてのIDをダブルおよびトリプルチェックしました。まとめてたくさんのスクリプトがあるので、これが起こらないようにするためにIDを使って極端に行きました。とにかく私には....

更新：ボタンまたはダイアログで問題が発生しているかどうかはわかりませんが、上記の問題は、ダイアログを起動するボタンに限定されているようです。同じことですが、1回目は問題ありませんが、2回目はそれほど問題ありません。一部にアラートを添付し、それは正常に機能します。

ダイアログはこのように構築されます（テキストファイル内で完全に、そのテキストファイルの準備ができているドキュメント上でも）。

$('#thisDialogDiv').dialog({ 
                        resizable:false, 
                        width:200, 
                        modal: true, 
                        autoOpen: false, 
                        buttons: { 
                        "Ok": function() { $(this).dialog("close"); } } 
                        }); //not bothering with buttons

<div id="thisDialogDiv">
<h3>Here is the Title</h3>
<p>Here is some content on the dialog</p>
</div>

上で参照されているボタンで、このようなダイアログを呼び出します

$('#btnNumber1').click(function () {
    $('#thisDialogDiv').dialog("open");
});

基本的には、インスタンスごとにこれで終わりです。かなり基本的なことだと思います。

4

1 に答える 1

2

私はあなたの問題を今よく理解していると思います。

各タブにがありますdiv。id="btnNumber1"ただし、これらのタブはすべて同じウィンドウ（より正確にはフレーム）に存在し、htmlidは特定のドキュメント内で一意である必要があります。

したがって、ボタンid =btnNumber2を2番目のタブ、 3番目btnNumber3のタブなどに指定する必要があります。最初のタブでのみ機能する理由は、すべてのコードがDOMに存在する最初のコードを見つけるためです。

編集：

ジャスティン、親ドキュメントで委任されたバインディングを行うとどうなりますか？例えば：

$('#thisMainTabs').on('click', '#btnNumber1', function() { alert('Button 1 clicked'); });

それでは、これは100％の確率で発火しますか？これが解決策だと言っているのではありません...コンテンツに関連するコードを保持しているのは良いことだと思います...そうでなければメンテナンスの悪夢になりますが、オンデマンドで何かが起こっているように感じますロード中.....ready()タブが最初にロードされた後、おそらく発火していませんか？ダンノ、WAGを作る;）

于 2012-08-31T12:49:18.117 に答える