1

これは、私が考えているよりも簡単でなければなりません。何が起こっているのかわからない。

Handlebar テンプレートで「埋めている」DIV があります。テンプレートが生成されたら、jQuery の slideDown を使用してパネルを開いてコンテンツを表示します。ここで、DIV をスライドアップするための close 関数を配置する必要があります。

問題は、 a.close 要素が script タグ内にあるため、クリック機能がバインドされていないことだと思います。

コンテンツの DIV は次のとおりです。

<div id="characteristic" style="bottom:0px; width:800px; display:none; position:fixed; left: 350px;"></div>

これが jQuery スニペットです。これは HTML の上部にあります。

$(document).ready(function(e){
  $("a.close").click(function(e) {
     e.preventDefault();
     $("#characteristic").slideUp();
  });
});

テンプレートのスニペット:

<script id="ac-template" type="text/x-handlebars-template">
    <div class="holder" style="background-color:#FFFFFF;">
        <div class="frame">
            <div class="content">
                <div class="info-box-holder">
                    <a class="close" href="">&times;</a>
                    <div class="heading">
                        <h2>ACTIONABLE CHARACTERISTIC</h2>
                    </div>
                    <div class="info-box">
                        <a href="#"><img class="alignleft" src="{{image_large}}" alt="" width="400" height="400" /></a>
                        {{#if subcategory_name}}
                            <h2>{{subcategory_name}}: {{name}}</h2>
                        {{else}}
                            <h2>{{category_name}}: {{name}}</h2>
                        {{/if}}
4

1 に答える 1

3

これは古い質問であり、おそらくすでに答えが出ていることは承知していますが、そうです、それは、JS コードが実行された時点でa.closeDOM に存在しないためです。

ハンドルバーがテンプレートのレンダリングを完了した後に JS コードを実行するか、ページの読み込み時に存在する上位レベルの DOM 要素 (何らかのコンテナー) にバインドしてから、必要なリンクに対してのみアクティブにする必要があります。このようなもの ( API を参照):

$(document).ready(function(e){
  $("#mycontainerdiv").on('click', 'div.info-box-holder a.close', function(e) {
     e.preventDefault();
     $("#characteristic").slideUp();
  });
});
于 2012-05-02T00:02:01.160 に答える