title: Onclick event on search bar suggestions
body: <p>I have added a search bar with suggestion elements. On click of search bar all the elements is displayed but onclick event is not working on these list suggestion elements.</p>
  <p>Have added click event to these suggestions which is stored in li .I want some actions to be performed onclick of these elements</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("click", ".search.search-list", function(e) {
    console.log('clicked')
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search {
    position: relative;
    margin: 0 auto;
    width: 300px;
  }
  
  .search input {
    height: 26px;
    width: 100%;
    padding: 0 12px 0 25px;
    /* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
    border-width: 1px;
    border-style: solid;
    border-color: #a8acbc #babdcc #c0c3d2;
    border-radius: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
    box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  }
  
  .search input:focus {
    outline: none;
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  }
  
  .search input:focus + .results { display: block }
  
  .search .results {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #cbcfe2 #c8cee7 #c4c7d7;
    border-radius: 3px;
    background-color: #fdfdfd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
    background-image: linear-gradient(top, #fdfdfd, #eceef4);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .search .results li { display: block }
  
  .search .results li:first-child { margin-top: -1px }
  
  .search .results li:first-child:before, .search .results li:first-child:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px outset transparent;
  }
  
  .search .results li:first-child:before {
    border-bottom: 5px solid #c4c7d7;
    top: -11px;
  }
  
  .search .results li:first-child:after {
    border-bottom: 5px solid #fdfdfd;
    top: -10px;
  }
  
  .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
  
  .search .results li:last-child { margin-bottom: -1px }
  
  .search .results a {
    display: block;
    position: relative;
    margin: 0 -1px;
    padding: 6px 40px 6px 10px;
    color: #808394;
    font-weight: 500;
    text-shadow: 0 1px #fff;
    border: 1px solid transparent;
    border-radius: 3px;
  }
  
  .search .results a span { font-weight: 200 }
  
  .search .results a:before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -9px;
    /* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
  }
  
  .search .results a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf); */
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  }
  
  :-moz-placeholder {
    color: #a7aabc;
    font-weight: 200;
  }
  
  ::-webkit-input-placeholder {
    color: #a7aabc;
    font-weight: 200;
  }
  
  .lt-ie9 .search input { line-height: 26px }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
   &lt;div class="modal fade" id="search-bar" role="dialog"&gt;
                  &lt;div class="modal-dialog search-modal"&gt;
                    &lt;div class="modal-content search-modal"&gt;
                      &lt;div class="modal-body"&gt;
                      &lt;section class="main"&gt;
                          &lt;form class="search"&gt;
                              &lt;input type="text" class="search-input" name="q" placeholder="Search..." /&gt;
                              &lt;ul class="results" &gt;
                                  &lt;li class="search-list"&gt;&lt;a href=""&gt;Search Result #1&lt;br /&gt;&lt;span&gt;Description...&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
                                   &lt;li class="search-list"&gt;&lt;a href=""&gt;Search Result #2&lt;br /&gt;&lt;span&gt;Description...&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="search-list"&gt;&lt;a href=""&gt;Search Result #3&lt;br /&gt;&lt;span&gt;Description...&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="search-list"&gt;&lt;a href=""&gt;Search Result #4&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/form&gt;
                     &lt;/section&gt;
                    &lt;/div&gt; 
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              </code></pre>
  </div>
  </div>
  </p>