title: Ajax link as list item
body: <p><strong>What I want to do</strong> I'm building a simple UI where you can search dynamically in an array with plain Javascript. The results list are links to fetch data from a Django backend with AJAX and show the details in a modal.</p>
  
  <p><strong>What I get</strong> The results list from the search works fine. But if I click on the links, the AJAX function isn't triggered.</p>
  
  <p>If I try the same link directly in the HTML (not generated by Javascript) it works fine and the function is called.</p>
  
  <p><strong>Note</strong> Don't pay attention to the Django part of the thing. I just want to know why the AJAX function is not called when I generate the link in the Javascript list.</p>
  
  <p>Any clues welcome. Thanks in advance!</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>let arr = ["anagrams-of-string-(with-duplicates)", "array-concatenation", "array-difference", "array-includes",]
  
  function updateResult(query) {
      let resultList = document.querySelector(".result");
      resultList.innerHTML = "";
  
      arr.map(function(algo){
          query.split(" ").map(function (word){
              if(algo.toLowerCase().indexOf(word.toLowerCase()) != -1){
     resultList.innerHTML += `&lt;li class="list-group-item"&gt;
                  &lt;a href="" id="${algo}" data-id="${algo}" class="artist-title show_product" style="color: black; padding-left: 0;" data-toggle="modal"&gt;${algo}test&lt;/a&gt;
                  &lt;/li&gt;`;
                  console.log("This works fine");
              }
          })
      })
  }
  
  $(function(){
              $('.show_product').on('click', function (e) {
                  e.preventDefault();
                  let product_id = $(this).attr('id');
                  console.log("This function is called");
  
                  $.ajax({
                      url:'/backend/form-fill/',
                      type:'POST',
                      data: $('#form_have_product_'+product_id).serialize(),
                      success:function(response){
                          console.log(response);
                          $('.show_product').trigger("reset");
                          openModal(response);
                      },
                      error:function(){
                          console.log('something went wrong here');
                      },
                  });
              });
          });
  
          function getFormData(content_data){
            $('#categoria_producto').text(content_data.field1);
            $('#estatus_contenido').text(content_data.field2);
            $('#descripcion_brief').text(content_data.field3);
            $('#descripcion_long').text(content_data.field4);
          };</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;div class="input-group" style="position: fixed; top: 0; z-index: 10;"&gt;
    &lt;input oninput="updateResult(this.value)" style="font-size: 3rem; height: 15vh;" type="search" class="form-control" placeholder="Search..." /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;ul class="list-group result" style="margin-top: 15vh;"&gt;&lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>