除了像 onclick 这样的委托处理程序事件之外，Jquery 直接事件不会触发？
Posted
技术标签:
【中文标题】除了像 onclick 这样的委托处理程序事件之外，Jquery 直接事件不会触发？【英文标题】：Jquery direct event is not firing except delegate handler events like onclick? 【发布时间】：2017-05-16 00:27:23 【问题描述】：我创建了一个应用程序，那里有很多食物菜单，点击特定食物时，详细信息应该会在带有食物图像的面板下打开。面板内部有一个手风琴，手风琴在展开和折叠时手风琴有问题，它不点火。
所以我尝试在名为portfolio_description的类下测试jQuery点击事件，在类内部，Jq点击事件没有触发。显示和隐藏也不起作用。但是委托处理程序正在触发。
grid.js 中的某些东西正在停止。
这个portfolio_description 类用于grid.js 和main.js 中，当点击图片时，细节应该在accordion body 中显示出来，它是一个第三方插件。
当我单击手风琴时，它没有被触发，grid.js 中的一些动态元素创建停止了展开和折叠。
注意：如果我删除了这个类，它就会被解雇。
<div id="ss" class="portfolio_description">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dish App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="modernizr-2.6.2.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
panel-group
margin-top: 20px;
.panel-group .panel
border-radius: 0;
background-color: transparent;
.panel-default > .panel-heading
background-color: transparent;
color: inherit;
position: relative;
border: none;
border-radius: 0;
padding: 0;
.panel-title > a
font-size: 14px;
text-transform: none;
display: block;
padding: 23px 40px 23px 30px;
background-color: #39adff;
color: #fff !important;
.panel-title
font-size: 20px;
text-transform: none;
font-weight: 400;
padding: 0;
position: relative;
.panel-group .panel-heading + .panel-collapse .panel-body
padding-top: 37px;
padding-bottom: 22px;
padding-left: 37px;
border-top: none;
background-color: #f0f3f5;
</style>
</head>
<body>
<section id="dishes">
<div class="container">
<div class="row ">
<div class="col-sm-12">
<h2 class="head-title text-center to_animate" data-animation="slideDown">Our Best Dishes</h2>
</div>
</div>
<div class="row">
<ul id="gallery-grid" class="gallery-grid col-sm-12">
<li>
<a href="#" data-largesrc="http://bed56888308e93972c04-0dfc23b7b97881dee012a129d9518bae.r34.cf1.rackcdn.com/sites/default/files/veggie-heart.jpg" data-title="Project Name 1" data-description="data-description">
<img src="http://bed56888308e93972c04-0dfc23b7b97881dee012a129d9518bae.r34.cf1.rackcdn.com/sites/default/files/veggie-heart.jpg" />
</a>
<div id="ss" class="portfolio_description">
<div class="block">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">
Our staff
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt enim eiusmod high life accusamus terry richardson.
</p>
</div>
</div>
</div>
</div>
<button id="sss" class="btn btn-success" value="clickme"> clickme</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<script src="jquery.isotope.min.js"></script>
<script src="grid.js"></script>
<script src="plugins.js"></script>
<script src="main.js"></script>
<script>
$(document).ready(function()
$(document).on("click","#sss",function()
alert("ss");
);
);
</script>
</body>
</html>
这是一个 plunker 演示。
在运行演示时，只需关闭或向左移动代码面板并运行示例。这样就可以清楚的看到demo了。 https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview
【问题讨论】：
【参考方案1】：将click 事件委托给document，如下所示：
$(document).on("click","#sss",function()
alert("ss");
);
更新：https://plnkr.co/edit/SNBuaZupA2YShWm6Srg2?p=preview
【讨论】：
，谢谢，它的工作，但我无法展开和折叠块下的引导手风琴，如果删除类 portfolio_description，它的工作.. 见这里@987654322 @以上是关于除了像 onclick 这样的委托处理程序事件之外，Jquery 直接事件不会触发？的主要内容，如果未能解决你的问题，请参考以下文章