title: Capture the click event of dynamic Buttons in Bootstrap Modal using jquery
body: <p>I hava Bootstrap model as below</p>
  
  <pre><code>&lt;div class="modal fade" id="PQModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h5 class="modal-title " id="exampleModalLongTitle"&gt;&lt;strong&gt;Priority Queue Selection&lt;/strong&gt;&lt;/h5&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body justify-content-center"&gt;
            &lt;div id="modal-text"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer justify-content-center"&gt;
            &lt;button type="button" class="btn btn-danger cancel"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>In this modal I am writing some dynamic buttons accoridng to the JSON response from server as below.</p>
  
  <pre><code>var scrn = '';
            $.each(pqueueList, function(index, val) 
            {
  
                scrn += ' &lt;div class="row justify-content-center top-buffer"&gt;';
                scrn += '   &lt;div class="col-6"&gt;';
                scrn += '   &lt;div class="btn btn-block';
                if (val["fieldType"] == "EVEN"){
                  scrn += ' btn-primary ';
                }
                else{
                  scrn += ' btn-success ';
                }
                scrn += '" value="'+val["pqId"]+'"&gt;&lt;h2&gt;'+val["pqName"]+'&lt;/h2&gt;&lt;/div&gt;'
                scrn += '   &lt;/div&gt;';
                scrn += '&lt;/div&gt;';
  
            });
            $('#modal-text').html(scrn);
            $("#PQModel").modal('show');
          }
  </code></pre>
  
  <p>I am driving to capture the click event on each of the button as below. </p>
  
  <pre><code>       $("#PQModel #modal-text div.btn").on('click',function(){
            var value = $(this).attr('value');
            alert("value "+ value);
          });
  </code></pre>
  
  <p>The modal is coming as expected and buttons are coming as expected. But the click I am not able to capture button click event.I am not sure, where am I going wrong. Please help me solve it out.</p>