1

これは別のDOHだと確信しています！facepalmの質問ですが、プログラマーではなくデザイナーとして、正しく理解するための助けが必要です。

私が持っているのは、jQuery .load を介してローカルの .html ファイルを呼び出すインデックス ファイルです。このように：（いくつかのタブ機能はここでは相対的ではありません-したがって、リンクターゲット呼び出し）

<a href="#lightbox">Lightbox</a></li>

<div id=lightbox">
   <div class="load">
        <script type="text/javascript">
            $('.load').load('examples/lightbox.html');
        </script>
   </div>
</div>

また、特にいくつかのライトボックスを処理する関数の束を含む外部 .js ファイルもあります。標準<script src="js/typography.js" type="text/javascript"></script> 含まれるもの:

$(document).ready(function(){
    $(".open-lightbox").on("click", function(){
        $('.lightbox').css('display','block');
    });
    $('.close-lightbox').click(function(){
        $('.lightbox').css('display','none');
    });
});

私の問題は、外部から呼び出された .html ファイルに .js ファイルに依存する要素がある場合です。ライトボックスのポップアップが機能しません。

何かのようなもの ：

<a href="#" class="open-lightbox">LightBox Link</a>

<div class="lightbox">
   lightbox content
   <a href="#" class="close-lightbox">Close</a>
</div>

html コードを の代わりにインデックス ページに移動しても問題ありません。JS を外部から呼び出すのではなく.load、インラインとして移動した場合と同じです。<script>...</script>どちらの場合でも正常に動作します。

私のSpidey感覚では、これは私の機能に関係が.loadあり、必要な順序で実行されていないことがわかりますが、私のjavascriptのコピー/貼り付けスキルはこれまでしかありません.

この組み合わせを機能させることができるかどうか、誰か教えてもらえますか? 本当にありがたいです。

編集

たぶん、私の自己説明が不十分だったので、より良い例を投稿してみましょう。私のインデックスコードが次のようになっている場合、すべてが機能します。意図したとおりにライトボックスがポップアップします。

<li><a href="#thistabid">Link to open Tab Content</a></li>

<div id="thistabid">
    <--Tab Content below-->
        <div class="somehtmlpage-load">
            <a href="#" class="open-lightbox">LightBox Link</a>

            <div class="lightbox">
                lightbox content
                <a href="#" class="close-lightbox">Close</a>
            </div>
        </div>
    <--End Tab Content-->   
</div>

上記のタブをクリックすると、「thisstabid」内のコンテンツが表示されます。その内容はどうでもいい。

今私がする場合：

<li><a href="#thistabid">Link to open Tab Content</a></li>

<div id="thistabid">
    <--Tab Content below-->
        <div class="somehtmlpage-load">
            <script type="text/javascript">
                $('.somehtmlpage-load').load('examples/lightbox.html');
            </script>
        </div>
    <--End Tab Content-->   
</div>

ライトボックスが機能しません。lightbox.html の内容は

<a href="#" class="open-lightbox">LightBox Link</a>

<div class="lightbox">
    lightbox content
    <a href="#" class="close-lightbox">Close</a>
</div>

すべてが機能する最初の例の html と同じです。唯一の違いは、ハードコードされているのではなく、jQuery が読み込まれていることです。

「外部から呼び出された .html ファイルに .js ファイル、つまりライトボックス ポップアップに依存する要素がある場合」とは、html が外部から呼び出されたファイルの一部である場合、ライトボックス機能が機能しないことを意味します。ハードコーディングされている場合は、意図したとおりにポップアップします。

一見すると.onが解決策のように見えますが、私の実装は的外れです:/

4

3 に答える 3

1

load() とドキュメントの準備ができている間に競合状態があるようです。

これに対処するには、次のことを行う必要があります。

  • クリックイベントをアタッチする前に、load() が完了するのを待つか
  • または、クリックを load() ステップのコンテナーにアタッチして、イベント委任を使用します。

委任の使用方法の詳細については、このページと他のページを参照してください。on()

コードは次のようになります。

$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
 $('.lightbox').css('display','block');
});
于 2013-02-25T21:40:21.753 に答える
1

「on」または「live」機能は、ページに存在する要素を介して適用する必要があります。通常、実際の要素の親が使用されます。ページ上の要素への正しい参照を使用して、次の行で何かを試すことができますか:

<li><a href="#thistabid">Link to open Tab Content</a></li>
<div id="thistabid">
  <--Tab Content below-->
  <div class="somehtmlpage-load">
       <!--leave tab empty for now -->          
   </div>
   <--End Tab Content-->   
</div>

<script>
(function(){
  $('.somehtmlpage-load').load('examples/lightbox.html');

  //live or on needs to be applied to an element that exists on th page
  $('#thistabid').on('click', '.open-lightbox', function(){
     $('.lightbox').css('display','block');
  });

  $('#thistabid').on('click', '.close-lightbox', function(){
     $('.lightbox').css('display','none');
  });
})();
</script>
于 2013-02-25T22:41:43.840 に答える
0

SSIを使用すると問題が解決しました。すべてのローカル ドライブを使いやすい状態に保とうとしましたが、予想よりも多くの問題を引き起こしているようです。

お気に入りの開発環境を選んでください...どちらでも競合は発生しませんでした。

ASP -<!--#include file = "examples/lightbox.html" -->

PHP - <?php include 'examples/lightbox.html';?>

他の誰かが同様の問題に遭遇した場合に備えて。

于 2013-02-26T16:58:57.703 に答える