1

これは私のjqueryです：

$(document).ready(function(){
    $("div#overlay div#getFBid div#overlayClose").on("click", function(){
        console.log("test")
    });
});

そして、これは ajax で呼び出される私の html です:

<div id="overlay">
    <div id="getFBid">
        <div id="overlayClose">&nbsp;</div>
        <h1>Wat is mijn Facebook page ID?</h1>
        <div id="fbPageURLholder">
            <input type="text" id="fbPageURL">
        </div>
    </div>
</div>

私は自分が間違っていることを理解できません。明らかに、本当に単純なはずの何かが欠けていると思います。何かご意見は？

PS。これに、jquery.com で見た live 関数は非推奨であり、delegate または on を使用する必要があることを追加する必要があります。

4

2 に答える 2

8

これ：

$("div#overlay div#getFBid div#overlayClose")

に減らすことができます

$('#overlayClose')

ドキュメントにはその ID の要素が 1 つしかないためです。

問題は; AJAX を使用してコンテンツを読み込んだ場合、リスナーをバインドしているときに DOMReady で使用できません。

まだ追加されていない要素にバインドするには、ライブ デリゲートを使用する必要があります。

$(document).on('click', '#overlayClose', function() {
    console.log('test');
});

DOMReady で利用可能で、破棄されていない、可能な$(document)限り要素に近いものをどこに配置する必要がありますか。

于 2012-07-30T09:53:41.693 に答える
0

jQueryをインポートしましたか？

それは私にとってはうまくいきます。[閉じる] をクリックすると、コンソールにテスト メッセージが記録されます。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"       type="text/javascript"></script>
</head>
<body>
    <div id="overlay">
        <div id="getFBid">
            <div id="overlayClose">Close</div>
                <h1>Wat is mijn Facebook page ID?</h1>
                <div id="fbPageURLholder">
                    <input type="text" id="fbPageURL">
                </div>
            </div>
     </div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function(){
        $("#overlayClose").on("click", function(){
            console.log("test")
        });
    });
</script>

それが役立つことを願っています。

于 2012-07-30T10:07:16.297 に答える