数据切换和 onclick 不能一起工作，我太新了，无法应用 @epascarello 的解决方案

Question

我有一个有点像这样的问题：

但是我无法将@epascarello 的解决方案应用于我的问题

我正在使用 bootstrap，我想在同一个上添加折叠和 onclick 操作 < a>

<a class="control" data-toggle="collapse" data-target="#demo"onclick="play('audioPlayer', this)">

如果我删除数据切换部分，则 onclick 起作用，如果我删除 onclick 部分，则数据切换起作用，

有人可以帮助我吗？

谢谢你:)

Answer 1

首先给你的

a tag

一个 id

<a id="YourID" class="control" data-toggle="collapse" 
data-target="#demo"onclick="play('audioPlayer', this)">

比你的 JS

$(document).on("click", "#YourID", function() {
  alert("Test");
});

先试试这个

这称为委托事件处理程序。您可以参考：http://api.jquery.com/on/

解释

使用委托事件处理程序，您可以将

event handlers

附加到我们运行代码时存在的

parent

元素（在本例中为

document

）。单击子元素时（无事件处理程序），该事件将由浏览器冒泡并由其父元素处理（附加事件处理程序）

委托事件的优点是可以处理来自稍后添加到文档中的后代元素。经过选择一个保证当时存在的元素附加了委托事件处理程序，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要

Answer 2

在普通 JS 中也是如此：

<ul class="nav nav-tabs">
    <li><a href="#name_ref" data-toggle="tab" id="name_id">My Tab Label</a>
    </li>
</ul>

稍后...

<div class="tab-pane fade" id="name_ref">
    <div class="panel-heading">Content</div>
</div>

稍后...

<script>
    document
    .getElementById("name_id")
    .addEventListener("click", function(event) { console.log("event");});
</script>