使用jquery捕获Bootstrap Modal中动态按钮的click事件 [英] Capture the click event of dynamic Buttons in Bootstrap Modal using jquery

问题描述

我有如下的Bootstrap模型

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>

在这种模式下，我根据服务器的JSON响应编写了一些动态按钮，如下所示.

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.

推荐答案

您要在DOM元素存在之前附加一个 click 事件.这意味着事件侦听器未附加任何内容.

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

您可能要使用事件委托来正确处理这种情况.这样会将事件侦听器附加到 parent 容器，并且只要其中包含 click 容器，它就会确定该元素是否与提供的辅助选择器( div.btn )

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);
 });

---

事件委托JQuery文档

这篇关于使用jquery捕获Bootstrap Modal中动态按钮的click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！