除了像onclick这样的委托处理程序事件外，Jquery直接事件不会触发吗？

我已经创建了一个应用程序，有很多食物的菜单在那里，而点击特定的食物项目，细节，应该在食物图像的面板下打开。在面板上有一个手风琴家，有一个问题在扩展和折叠手风琴的同时，手风琴也没有开火。除了像onclick这样的委托处理程序事件外，Jquery直接事件不会触发吗？

所以我试着测试jquery点击事件下名为portfolio_description的类，在类内部，Jq单击事件不是正在发射。显示和隐藏也不工作。但委托处理程序正在发射。

某些东西阻止了grid.js.

这个portfolio_description类用于grid.js和main.js单击图片时，细节应该以细节显示在它的第三方插件的手风琴身上。

当我点击这个手风琴时，它没有被触发，在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>

这里是一个plunker演示。

在运行演示时，只需关闭或向左移动代码面板并运行示例。因此，可以清楚地看到演示。 https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview

来源

2017-01-01 Mohamed Sahir

代表click事件document象下面这样：

$(document).on("click","#sss",function() { 
    alert("ss"); 
});

更新时间：https://plnkr.co/edit/SNBuaZupA2YShWm6Srg2?p=preview

来源

2017-01-01 18:00:38

，谢谢，它的工作，但我无法扩大和块下崩溃引导手风琴，如果删除类** portfolio_description **，其工作..见这里[链接]（https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview） –

除了像onclick这样的委托处理程序事件外，Jquery直接事件不会触发吗？

回答

相关问题