4

「box」の ID を持つ動的に作成された div 内に、「close」の ID を持つ div があります。次のコードは、ユーザーが閉じるをクリックするたびに何かを実行するためのものです。

$('#box').on('click','#close',function(){
    alert(1); // Test to see if the click works
});

私は Big Cartel CMS を使用しています。「ライブ プレビュー モード」で閉じるをクリックすると問題なく動作するように見えますが、実際にサイトを公開して通常どおりに表示すると、まったく何も実行されず、エラーも発生しません。

念のため、マークアップと CSS:

<div id="box"> <!-- Dynamically loaded -->
    <div id="close"></div>
    <h2 id="name"></h2>
    <div id="description">
        <p>blah...</p>
    </div>
</div>

#close{
    background: url(image-path);
    float: right;
    position: relative;
    top: 0;
    margin: 0 0 0 12px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 100;
}

私は何が欠けていますか？

4

3 に答える 3

7

問題は、#box動的でもあるためです。ページがロードされたときに使用できる要素であるプライマリセレクターが必要です。

主な候補は、ロードする要素です#box。

于 2012-12-06T15:13:26.107 に答える
3

動的に作成された要素ではなく、既存の要素にフックする必要があります。

$(document).on('click','#box #close',function(){
    alert(1); // Test to see if the click works
});

編集:ドキュメントにフックしないためのより良い解決策:) domトラバーサルを回避します。

$("#boxesparentid").on('click','#close',function(){
    alert(1); // Test to see if the click works
});
于 2012-12-06T15:13:44.983 に答える
2

イベント委任を使用する場合 (たとえば、現在の方法を使用する場合)、イベントをより高い.on要素にバインドし、バブルアップするすべてのイベントをチェックして、セレクターと一致するかどうかを確認します。認識すべき重要な部分は、バインドしている要素が現在 DOM に存在することを確認する必要があるということです (バブルアップする要素は存在する必要はありません)。DOM

あなたの場合、ボックスも動的であるため、イベントは何にもバインドされていません。代わりに、存在するドキュメントまたは現在DOM

例えば

$(document).on('click','#close',function(){
    alert(1); // Test to see if the click works
});
于 2012-12-06T15:17:17.557 に答える