Binding events to dynamically added elements in jQuery Modal Pop Up

Question

I am using jQuery Modal PoUp . I have a number of textboxes and buttons that I display within the popup. There is a button, btnaddlot to which I want to add a click event, but I am unable to do so.

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

It seems that the only way to add button is like buttons: { "OK": function () { $(this).dialog("close"); } } buttons: { "OK": function () { $(this).dialog("close"); } } BUT I want to add click event to btnAddLot and may be later on I might want to add events to radio buttons that i have within the popup. How do I do this?

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

});

Answer 1

Just add the html as regular code, then you can set the onclick right off the bat. Set the pop-up to hidden at first if you need to.

 $('#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> 

Answer 2

$(function () {
        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: 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#dialog").on("click","#btnAddLot",function () {
            alert('hey');

        });
        $("#dialog").html(varLot).hide().dialog({
        //you might put your options here
        });



    })