Capture the click event of dynamic Buttons in Bootstrap Modal using jquery [duplicate]

问题

I hava Bootstrap model as below

<div class="modal fade" id="PQModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title " id="exampleModalLongTitle"><strong>Priority Queue Selection</strong></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body justify-content-center">
          <div id="modal-text"></div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-danger cancel">Cancel</button>
        </div>
      </div>
    </div>
  </div>

In this modal I am writing some dynamic buttons accoridng to the JSON response from server as below.

var scrn = '';
          $.each(pqueueList, function(index, val) 
          {

              scrn += ' <div class="row justify-content-center top-buffer">';
              scrn += '   <div class="col-6">';
              scrn += '   <div class="btn btn-block';
              if (val["fieldType"] == "EVEN"){
                scrn += ' btn-primary ';
              }
              else{
                scrn += ' btn-success ';
              }
              scrn += '" value="'+val["pqId"]+'"><h2>'+val["pqName"]+'</h2></div>'
              scrn += '   </div>';
              scrn += '</div>';

          });
          $('#modal-text').html(scrn);
          $("#PQModel").modal('show');
        }

I am driving to capture the click event on each of the button as below.

       $("#PQModel #modal-text div.btn").on('click',function(){
          var value = $(this).attr('value');
          alert("value "+ value);
        });

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.

回答1:

You're attaching a click event before the DOM elements exist. This means the event listener is attaching to nothing.

You would want to use event delegation to properly handle this situation. This attaches an event listener to the parent container, and whenever there is a click inside of it, it determines if the element matches the secondary selector provided (div.btn)

 $("#PQModel #modal-text").on('click','div.btn', function(){
          var value = $(this).attr('value');
          alert("value "+ value);
 });

Event Delegation JQuery Docs

回答2:

I suspect that binding of the objects for the click function is happening before you complete the generation and display of the objects. To make sure, replace your third code block with something simple like

console.log($("#PQModel #modal-text div.btn")),

and verify that at the time where this is called that objects are actually being selected

来源：https://stackoverflow.com/questions/60289506/capture-the-click-event-of-dynamic-buttons-in-bootstrap-modal-using-jquery

标签

javascript

jquery

html

bootstrap-modal