Jquery direct event is not firing except delegate handler events like onclick?

Question

I have created an application, there are lots of foods menus are there, while click the particular food items, the details,should be open under the panel with the food image. Inside the panel have an accordion, there is a problem with the accordion while expanding and collapsing the accordion, its not firing.

So I have try to test the jQuery click event under the class called portfolio_description, Inside the class, Jq click event is not firing. Show and hide is also not working.But Delegate handler is firing.

Something is stopping from grid.js.

This portfolio_description class is used in grid.js and main.js for while clicking the image,the details should be shown with details in accordion body, its an third party plugins.

When I click the accordion, its not fired,some dynamic elements creation in grid.js stop the expand and collapse.

Note: if I remove the class its gets fired. <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>

Here is an plunker demo.

While running the demo, just close or move left the code panel and run the sample. So that able to clearly see the demo. https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview

Answer 1

Delegate click event to document like below:

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

Updated : https://plnkr.co/edit/SNBuaZupA2YShWm6Srg2?p=preview

Jquery direct event is not firing except delegate handler events like onclick?

Question

1 answers

solution1
1 2017-01-01 18:00:38

Jquery direct event is not firing except delegate handler events like onclick?

Question

1 answers

solution1 1 2017-01-01 18:00:38

solution1
1 2017-01-01 18:00:38