[英]Jquery direct event is not firing except delegate handler events like onclick?
我创建了一个应用程序,那里有很多食物菜单,在单击特定食物项目时,应在食物图像面板下打开详细信息。 面板内部有一个手风琴,在扩展和折叠手风琴时手风琴有一个问题,它不能发射。
因此,我尝试在名为Portfolio_description的类下测试jQuery click事件,在该类内部,Jq click事件未触发。 显示和隐藏也不起作用,但是委托处理程序正在触发。
grid.js停止了某些工作。
在grid.js和main.js中,此Portfolio_description类用于单击图像时,详细信息应与详细信息一起显示在手风琴主体中,它是第三方插件。
当我单击手风琴时,它没有被触发,在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" alt="" />
</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>
这是一个小矮人演示。
在运行演示时,只需关闭或向左移动代码面板并运行示例。 这样就可以清楚地看到演示。 https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview
将click
事件委托给document
如下所示:
$(document).on("click","#sss",function() {
alert("ss");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.