从javascript加载内容时调用onclick

如何解决从javascript加载内容时调用onclick

大家好，在这个问题上我需要帮助，我尝试单击 copyCodeBtn 以在模式弹出窗口后调用复制内容并从javascript中检索内容。

当我单击copyCodeBtn来调用复制函数时，我需要使用我的内容，但是我的内容是基于javascript的，但是我尝试了很多次却没有成功解决它。

$('#copyCodeBtn').on('click',function() {
var $this = $(this);

// Get target
var target = $this.data('target');

// Select Key
$('#' + target)[0].select();

// copy Key
document.execCommand("copy");
});

});

// Load Transaction List Modal
function loadModalcopyGiftCardCode(giftcard) {

  // Show Modal
  $('#modalPopup').modal('show');

  var modalBody = '<div class="mt-4">';

  modalBody += '<div class="text-center col-md-12">';
  modalBody += '<img class="mb-3" src="assets/images/cards/qrcode.png" alt="QR Code" title="Scan QR Code for more details" width="150">';
  modalBody += '<p>Scan QR Code for redeemption on Offline & Online Store  </p>';
  modalBody += '</div>';

  modalBody += '<div class="form-group col-md-12">';
  modalBody += '<input type="text" class="form-control" id="giftcard" placeholder="GiftCard Number" value="' + giftcard + '" readonly>';
  modalBody += '</div>';

  modalBody += '<div class="form-group col-md-12">';
  modalBody += '<button type="button" id="copyCodeBtn" class="btn btn-primary btn-block" data-target="giftcard">';
  modalBody += 'copy Gift Card Code';
  modalBody += '</button>';
  modalBody += '</div>';

  modalBody += '</div>';

  // Modal Title
  var modalTitle = '<h4>Gift Card Code</h4>';

  // Show Html on Modal Body
  $("#modal-cus-title").html(modalTitle);

  // Show Html on Modal Body
  $(".modal-body").html(modalBody);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a href="javascript:void(0);" class="btn btn-primary d-inline mr-2" onclick="loadModalcopyGiftCardCode(12345667789988);">Show Code</a>

<div class="modal fade" id="modalPopup" tabindex="-1" role="dialog" aria-labelledby="modalPopup" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content card payment">
      <div class="modal-header">
        <!-- Modal Title -->
        <div class="modal-title">
          <!-- Custom Title-->
          <div id="modal-cus-title"></div>
          <!-- End Custom Title-->
        </div>
        <!-- End Modal Title -->

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
      </div>
      <div class="modal-body">
      </div>

    </div>
  </div>
</div>

解决方法

您在这里遇到了一个问题，因为您试图在将click的{​​{1}}事件添加到DOM并存在之前对其进行设置。

在将按钮的HTML添加到DOM后，附加事件处理程序：

#copyCodeButton

// Load Transaction List Modal
function loadModalCopyGiftCardCode(giftcard) {

  // Show Modal
  $('#modalPopup').modal('show');

  var modalBody = '<div class="mt-4">';

  modalBody += '<div class="text-center col-md-12">';
  modalBody += '<img class="mb-3" src="assets/images/cards/qrcode.png" alt="QR Code" title="Scan QR Code for more details" width="150">';
  modalBody += '<p>Scan QR Code for redeemption on Offline & Online Store  </p>';
  modalBody += '</div>';

  modalBody += '<div class="form-group col-md-12">';
  modalBody += '<input type="text" class="form-control" id="giftcard" placeholder="GiftCard Number" value="' + giftcard + '" readonly>';
  modalBody += '</div>';

  modalBody += '<div class="form-group col-md-12">';
  modalBody += '<button type="button" id="copyCodeBtn" class="btn btn-primary btn-block" data-target="giftcard">';
  modalBody += 'Copy Gift Card Code';
  modalBody += '</button>';
  modalBody += '</div>';

  modalBody += '</div>';

  // Modal Title
  var modalTitle = '<h4>Gift Card Code</h4>';

  // Show Html on Modal Body
  $("#modal-cus-title").html(modalTitle);

  // Show Html on Modal Body
  $(".modal-body").html(modalBody);

  $('#copyCodeBtn').on('click',function() {
    var $this = $(this);

    // Get target
    var target = $this.data('target');

    // Select Key
    $('#' + target)[0].select();

    // Copy Key
    document.execCommand("copy");
  });

}

,

代码中有一些错误，您有两个});，而只有一个操作括号，我认为这弄乱了Java脚本，导致未定义“ loadModalCopyGiftCardCode”，并且发生了错误>

Error:{
  "message": "Uncaught ReferenceError: loadModalCopyGiftCardCode is not defined","filename": "https://stacksnippets.net/js","lineno": 13,"colno": 122
}

这也可能只是我，但是giftcard在哪里（如function loadModalCopyGiftCardCode( 礼品卡 )）