javascript - 将事件绑定(bind)到 jQuery Modal Pop Up 中动态添加的元素

Question

我正在使用jQuery Modal PoUp 。我在弹出窗口中显示了许多文本框和按钮。有一个按钮，btnaddlot我想为其添加点击事件，但我无法这样做。

var varLot = '<b>Lot Title: </b> <input type="text" id="txtlottitle" style="width:500px;" value="Lot Title" /> <textarea id="lotstextarea"></textarea> <input type="submit" value="ADD" id="btnAddLot" class="bluebutton" style="float:right;"/> <br /> <div id="lottypes"> <table> <tr> <td style="width:width: 80px;"><b>Lot Types: </b></td><td> <table> <tr><td><table><tr><td><input id="rdoitemlot" name="lottype" type="radio" value="Item Lot" /></td><td>Item Lot - Bid at Item level, compete at Lot level(collect item pricing during bidding.)</td></tr></table> </td></tr> <tr><td><table><tr><td><input id="rdobasketlot" name="lottype" type="radio" value="Basket"/></td><td>Basket - Bid at Lot level, compete Lot level(collect item pricing post bidding.)</td></tr></table> </td></tr> <tr><td><table><tr><td><input id="rdobasketwithnoitem" name="lottype" type="radio" value="Basket with No Items" /></td><td> Basket with No Items - Bid at Lot level, compete Lot level(Do not collect item pricing.)</td></tr></table> </td></tr> </table></td> </tr> </table> </div> <hr /> <table> <tr> <td>Improve Bid By: </td><td><span id="lblimprovebidsby"></span></td> </tr> <tr> <td><span id="lblbiddecrement">Bid Decrement</span></td><td><input type="number" id="txtbiddecrement" /></td> </tr> <tr> <td><span >Protect the lead bid with front buffer of : </span></td><td><input type="number" id="txtfrontbuffer" /></td> </tr> <tr> <td><span >Protect the lead bid with back buffer of : </span></td><td><input type="number" id="txtbackbuffer" /></td> </tr> <tr> <td><span >Can participants submit tie bids : </span></td><td><span id="lbltiebids"></span></td> </tr> </table>'

var section = $(this);
$(this).toggleClass("expand");
$(function () {
    $("#dialog").dialog(
        { width: 800 }, 
        { height: 600 }, 
        { modal: true }, 
        { 
            open: function (event, ui) {
                $("#dialog").html(varLot);
                $("textarea").jqte();
                //$("#dialog").append($(section).html());
            },
            buttons: { 
                "OK": function () { 
                    $(this).dialog("close"); 
                } 
            } 
        }
    );

似乎添加按钮的唯一方法是 buttons: { "OK": function () { $(this).dialog("close"); } }但我想将点击事件添加到 btnAddLot，稍后我可能想将事件添加到弹出窗口中的单选按钮。我该怎么做呢？

$('#pricingdiv').on('click', '#btnAddLot', function (e) {
    alert('hey');
    e.preventDefault();   

});

Answer 1

只需添加 html 作为常规代码，然后您就可以立即设置 onclick。如果需要，首先将弹出窗口设置为隐藏。

$('#btnAddLot').click(function (e) {
    alert('hey');
    e.preventDefault();
});

$("#dialog").dialog({
    width: 800
}, {
    height: 600
}, {
    modal: true
}, {
    open: function (event, ui) {
        $('#dialog').show();
        $("#dialog").html(varLot);
        $("textarea").jqte();
        //$("#dialog").append($(section).html());
    },
    buttons: {
        "OK": function () {
            $(this).dialog("close");
        }
    }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='dialog' style="display:none"><b>Lot Title: </b> 
    <input type="text" id="txtlottitle" style="width:500px;" value="Lot Title" />
    <textarea id="lotstextarea"></textarea>
    <input type="submit" value="ADD" id="btnAddLot" class="bluebutton" style="float:right;" />
    <br />
    <div id="lottypes">
        <table>
            <tr>
                <td style="width:width: 80px;"><b>Lot Types: </b>

                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <input id="rdoitemlot" name="lottype" type="radio" value="Item Lot" />
                                        </td>
                                        <td>Item Lot - Bid at Item level, compete at Lot level(collect item pricing during bidding.)</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <input id="rdobasketlot" name="lottype" type="radio" value="Basket" />
                                        </td>
                                        <td>Basket - Bid at Lot level, compete Lot level(collect item pricing post bidding.)</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <input id="rdobasketwithnoitem" name="lottype" type="radio" value="Basket with No Items" />
                                        </td>
                                        <td>Basket with No Items - Bid at Lot level, compete Lot level(Do not collect item pricing.)</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <hr />
    <table>
        <tr>
            <td>Improve Bid By:</td>
            <td><span id="lblimprovebidsby"></span>

            </td>
        </tr>
        <tr>
            <td><span id="lblbiddecrement">Bid Decrement</span>

            </td>
            <td>
                <input type="number" id="txtbiddecrement" />
            </td>
        </tr>
        <tr>
            <td><span>Protect the lead bid with front buffer of : </span>

            </td>
            <td>
                <input type="number" id="txtfrontbuffer" />
            </td>
        </tr>
        <tr>
            <td><span>Protect the lead bid with back buffer of : </span>

            </td>
            <td>
                <input type="number" id="txtbackbuffer" />
            </td>
        </tr>
        <tr>
            <td><span>Can participants submit tie bids : </span>

            </td>
            <td><span id="lbltiebids"></span>

            </td>
        </tr>
    </table>
</div>