如何使用动态添加的按钮打开模式？

Question

我正在研究HTML模式。我参考了以下链接jQuery hunterPopup Demo。我正在尝试使用JQuery动态添加按钮，该按钮将进一步用于弹出模式。我使用以下代码动态添加按钮。

$("#mainTable").append("<button  class='custom-samples-routes' id='popupReturn" + srNumber + "' style='height:30px'" + getRoute + "</button>");

我默认在屏幕上有3个按钮，它们弹出模式时没有任何问题。当我动态添加按钮并尝试使用此新按钮进行模式化时，会出现问题。

$(document).ready(function (e) {

    var popupEvent = function () {
    }
    $('.custom-samples-routes').hunterPopup({
        width: '380px',
        height: '270px',
        content: $('#tableContent'),
        event: popupEvent
    });
});

其中＃tableContent是模式的ID。如何使用新添加的按钮打开模式？

Answer 1

您应该在.append()之后初始化弹出窗口。另外，我在代码中看到2个不一致的地方：

1. [<Button>应该是<button>
2. 您打电话给$('.custom-samples-routes').hunterPopup()，但您按钮上的班级是.samples-routes

所以您的代码将是：

$("#mainTable").append("<button class='custom-samples-routes' style='height:30px'><label class='custom-samples-routes' id='popupReturn" + srNumber + "' style='height:30px'>" + getRoute + "</label></button>" +");

var popupEvent = function () {
}

$('.custom-samples-routes').hunterPopup({
    width: '380px',
    height: '270px',
    content: $('#tableContent'),
    event: popupEvent
});

Answer 2

将侦听器附加到文档，并检查它是否是具有类custom-samples-routes的元素。

$(document).on('click', '.custom-samples-routes', function() {
  console.log('Listening')
});

$("#mainTable").append("<button class='custom-samples-routes'>Dynamic Button</button>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainTable">
  <button class="custom-samples-routes">Button 1</button>
</div>

Answer 3

确保绑定弹出窗口之后，然后将按钮插入DOM。您的代码应类似于：

$(document).ready(function (e) {

  // 1. inject button
  $("#mainTable").append("<Button class='custom-samples-routes' style='height:30px'><label class='samples-routes' id='popupReturn" + srNumber + "' style='height:30px'>" + getRoute + "</label></Button>");

  // 2. bind popup
  var popupEvent = function () {}
  $('.custom-samples-routes').hunterPopup({
      width: '380px',
      height: '270px',
      content: $('#tableContent'),
      event: popupEvent
  });
});

此外，请注意，您在发布的代码中有几次错别字，这也可能是导致错误的原因：

1. "的末尾还有一个额外的$("#mainTable").append()。
2. 您插入的按钮的类别为“ samples-routes”，标签的类别为“ custom-samples-routes”。对您来说，事件按钮可能更安全。