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

Question

我正在研究 Html 模式。我参考了下面的link 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

将侦听器附加到文档并检查它是否是 class 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 2

确保在 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 }); });

另外，请注意，您发布的代码中有几个拼写错误，这也可能是导致错误的原因：

在$("#mainTable").append()的末尾多了一个"。

您输入的按钮具有 class "samples-routes"，标签具有 "custom-samples-routes"。事件按钮对您来说可能更安全。

Answer 3

你可以像下面那样做。

var popupEvent = function() {
    alert("Hello")
}
var config = {
    width: '320px',
    height: '200px',
    title: "jQuery hunterPopup Demo",
    content: $('#tableContent'),
    event: popupEvent
}
var counter = 1;
$().ready(function(e) {


    $('#addnewDynamic').on('click', function() {
        debugger
        var _btn = $("<input/>", {
            type: "button",
            value: "Show popup",
            id: "btn_" + counter,
            class: "btn btn-success"
        })

        $("#container").append(_btn);
        $("#" + "btn_" + counter).hunterPopup(config);
        counter++;
    });

});

body { background-color:#34BC9D; font-family:'Roboto';}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Bootstrap-style-Popover-Plugin-For-jQuery-hunterPopup/js/jquery-popup.js"></script>
<link href="https://www.jqueryscript.net/demo/Bootstrap-style-Popover-Plugin-For-jQuery-hunterPopup/css/hunterPopup.css" rel="stylesheet"/>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id='container'>
<input type="button" id="addnewDynamic" value="Add New Button with Popup" style="margin: 20px 0 0 20px;" class="btn btn-default">

        <div id="tableContent" style="display:none">
            <div>
                <div class="panel panel-default">
                    <div class="panel-heading">Sub Title</div>
                    <div class="panel-body form-inline dept1">
                        <a class="btn btn-default" id="001">Item</a>
                        <a class="btn btn-default" id="002">Item</a>
                        <a class="btn btn-default" id="003">Item</a>
                        <a class="btn btn-default" id="004">Item</a>
                    </div>
                </div>
            </div>
        </div>
</div>

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

How to open modal using dynamically added button?

html

javascript

jquery

modal-dialog