2015-06-22 67 views
1

我正在使用jQuery Modal PoUp。我在彈出窗口中顯示了許多文本框和按鈕。有一個按鈕,btnaddlot我想添加一個點擊事件,但我無法這樣做。在jQuery中動態添加元素的綁定事件Modal Pop Up

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(); 

}); 
+0

假設'#pricingdiv'是在DOM負載(而不是與彈出附加)你的第二個例子應該能正常運行。但請注意,您實例化彈出窗口的方式不正確。這些屬性應該全部是* single *對象的一部分,並非每個對象都在自己的內部定義。此外,你似乎有一些不匹配的大括號。 –

+0

#pricingdiv不會動態添加。它已經存在。它不工作。我剛剛發現,如果我通過模式彈出的「打開」部分移動click事件綁定代碼。有用! – Arbaaz

回答

0

只需將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>

0
$(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 
     }); 



    })