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

我正在使用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>

当我单击一个标签时，什么也没有发生。有人可以指导我。

编辑

    <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>

屏幕截图如下：

最佳答案

您无法将点击事件附加到具有相同id的2个不同元素上，您需要另一个id作为锚点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>

关于javascript - 使用“a”标签时如何触发点击事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38513136/