javascript - 使用 "a"标签时如何触发点击事件

Question

我正在使用 jquery flip 插件。 https://nnattawat.github.io/flip/在两个 div 元素之间切换。我有一个按钮，用于在两个 div 元素之间切换。我能够实现它。但我希望在单击“a”标签时具有相同的功能。

完美工作:

    <button type="button" id = "toggle1" class = "toggle">Click Me!</button>

<script>
$(document).ready(function() {
  $("#flip1").flip({
 trigger: 'manual'
  });
$('#toggle1').click(function() {
  $("#flip1").flip('toggle');
  });

});
 </script>

现在我想用

替换按钮

<a id = "toggle1"><i class="some-icon"></a>

当我点击 a 标签时，没有任何反应。谁能指导我。

编辑

    <div class = "flip" id = "flip1">
        <div class = "front">
                               <div id = "chartAnchor1" class="x_content">
                             // some front stuff here
                               </div>
                             </div>
                               <div class = "back">

                                <div id = "tableAnchor1" class="x_content">
                              // some flipped stuff here
                              </div>
        </div>
</div>

编辑:在 div 的菜单栏中添加时它不起作用。我在这里添加我的代码。

<div class="col-md-6 col-sm-6 col-xs-12">
   <div class="x_panel">
      <div class="x_title">
         <h2>INCOME<small>Sessions</small></h2>
         <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class          ="fa fa-wrench"></i></a>
               <ul class="dropdown-menu" role="menu">
                  <li><a href="settings.html">Settings 1</a>
                  </li>
                  <li><button type="button" id = "toggle1" class = "toggle">Click Me!</button>
                  </li>
               </ul>
            </li>
            <li>
               <a id="toggle1">link</a><!-- <a id = "toggle1"><i class="fa fa-external-link user-profile-icon">nm</i></a> -->
            </li>
            <li><a class="close-link"><i class="fa fa-close"></i></a>
            </li>
         </ul>
         <div class="clearfix"></div>
      </div>
      <div class = "flip" id = "flip1">
         <div class = "front">
            <div id = "chartAnchor1" class="x_content">
            </div>
         </div>
         <div class = "back">
            <div id = "tableAnchor1" class="x_content">
            </div>
         </div>
      </div>
   </div>
</div>

截图如下:

Answer 1

您不能在具有相同 id 的 2 个不同元素上附加点击事件，您需要另一个 id 作为 anchor a，像 toggle2

$(document).ready(function() {
  $("#flip1").flip({
 trigger: 'manual'
  });
$('#toggle1').click(function() {
  $("#flip1").flip('toggle');
  });
$('#toggle2').click(function() {
  $("#flip1").flip('toggle');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
  
  
<a id = "toggle2"><i class="some-icon">Click me too</i></a>

<button type="button" id = "toggle1" class = "toggle">Click Me!</button>

<div class = "flip" id = "flip1">
  <div class = "front">
    <div id = "chartAnchor1" class="x_content">
      // some front stuff here
    </div>
  </div>
  <div class = "back">

    <div id = "tableAnchor1" class="x_content">
      // some flipped stuff here
    </div>
  </div>
</div>