Question

我正在使用Mustache.js进行项目，但我一直试图在模板中包含一个jQuery按钮。

我制作了一个模板，展示了我州州长选举的五位候选人。在JSON中，我包括他们的名字，照片和派对。我将数据加载到此模板中：

{{ #governor }}
    <div class="cand-{{ head }}">
        <div class="head">
            <img src="{{ picture }}">
        </div>
        <div class="bio">
            <h5>{{ name }}</h5>
                <i class='fa fa-circle' style='color: {{ color }}'></i> {{ party }}<br>  
        </div>
    </div>
{{ /governor }}

现在，我想在派对行下方添加一个jQuery按钮，隐藏其他候选者并调出一个div，其中包含嵌套在其中的另一个按钮关闭的详细信息。但是，该按钮在Mustache模板中不起作用。它外面工作正常。这是我的按键代码：

<button class="open-govA">Details</button>

<script>
$( ".open-govA" ).click(function() {
  $( ".details-govA" ).show( "slow" );
  $( ".cand-govB, .cand-govC, .cand-govD, .cand-govE").hide( "slow" );
  });

$( ".close-govA" ).click(function() {
  $( ".details-gov" ).hide( "slow" );
   $( ".cand-govB, .cand-govC, .cand-govD, .cand-govE").show( "slow" );
  });
</script>

我该怎么办？

Answer 1

正如大家已经说过的那样，你应该event delegation使用the jQuery on function：

<script>
  $( "#parentInPage" ).on("click", ".open-govA", function() {
    $( ".details-govA" ).show( "slow" );
    $( ".cand-govB, .cand-govC, .cand-govD, .cand-govE").hide( "slow" );
  });

  $( "#parentInPage" ).on("click", ".close-govA", function() {
    $( ".details-gov" ).hide( "slow" );
    $( ".cand-govB, .cand-govC, .cand-govD, .cand-govE").show( "slow" );
  });
</script>

如果您在附加所有这些模板的页面上没有公共元素，则可以使用"body"。请务必小心使用它 - 请参阅jQuery on o文档中的事件性能部分。

在Mustache.js模板中创建一个有效的jQuery按钮

1 个答案: