3

「次へ」というメインページにロードしている新しいdivがあります。「次へ」の div は、Story.php というページにあるボタンです。このコードを読み込んでいます。

$('.CoolBox').load('Story.php', function() 
    {
 /// The "Next div" is NOW on display but not recognized by main page that loaded it.
    });

しかし、「次へ」の div を関数またはクリック可能にしようとすると、機能しません。

$("#Next").click(function() 
    {
/// Run my code. Call a function?

    });

2つのオプションがあることに気づきました。読み込んでいるページにコードを配置して、jQuery が「次の」div を認識できるようにします。私はそれを行い、「Story.php」ページを単独でロードすると正常に機能しますが、そのページをメインページにロードすると機能しなくなります。

これと同じ概念を関数にも適用する必要があります。ページにまだロードされていない div を呼び出す関数を作成するにはどうすればよいですか?

そのページのdivにアクセスできるStory.phpに関数を配置するか、メインページに関数を配置して、新しくロードされたdivを何らかの方法で「登録」しますか?

私は次のようなものを使用できるかもしれないと考えています...

document.getElementById("#Next") /// but what is the full code I use?

更新: 完全なコードは、testing.php というページで見ることができます http://beaubird.com/testing.php STORY という最初のボタンをクリックします。次に、下部にある [次へ] というボタンを探します。これも「Next」という div 名を持っています。「次へ」の div で、より多くのストーリーを読み込んで、ページ上の他の要素を制御できるようにしたいと考えています。

行番号 366 で、このコードを呼び出します。

$('.CoolBox').load('Story.php', function() 
                {
        /// it loads this page http://www.BeauBird.com/Story.php
                // Where the Next div is contained. 
                });
        }

何かご意見は？本当にありがとう！

4

3 に答える 3

3

この問題を解決するには、委任されたイベントを使用できます。

$(".CoolBox").on("click", "#Next", function() {
    /// Run my code.
});

ここでは.CoolBox、 の静的親要素と見なし#Nextます。

于 2012-11-29T22:37:47.923 に答える
1

次に追加したコードを示していただければ幸いです。しかし、それを見ずに、これを試してください：

var nxt = document.createElement("div");
$(nxt).click(function(){ /* code */ };
someNode.appendChild(nxt);

編集

そのルートに行きたい場合のイベント委任の例を次に示します: http://jsfiddle.net/k3fvd/

仕様

リンクされたページでは、委任されたコード

$(".CoolBox").on("click","#Next",function(){
  /* code */
});

意図したとおりに動作しています。おそらく意図していなかったのdiv id="layer2"は、クリック イベントが z-index または要素リストの上位にあるために盗まれていることです。何がこれを引き起こしているのか完全にはわかりません。おそらく、すべての div が として定義されてdisplay:block;おり、何らかの形でposition:absolute;. これに対する簡単な回避策は、次のposition:absolute;ようにより詳細に指定することです。

    #layer2  {
position: absolute important!; 
left: 1px;
top: 0px;
z-index: 3;
width: 1246px;
height: 1031px;
margin-left: 0px;
margin-top: 0px;
background-image: url(sg_jesus_media/layer2.gif);
background-repeat: no-repeat;
}

position:absolute important!;編集されていることに注意してください。これにより、div id="Next"要素がクリック イベントを受信できるようになります。

于 2012-11-29T22:38:26.983 に答える
0

イベントを委任する必要があるiemphasized テキスト

$("body").on('click', "#Next" ,function() {

});

"body"静的祖先に置き換えることができます。

于 2012-11-29T22:39:41.777 に答える