復制元素時，jQuery click事件不會觸發

Question

我有一個隱藏的div，其中包含一些內容：

<div id="email_content_hidden">
    <div id="email_form">
        <label>De: <span>*</span></label>
        <input type='email' id='email_from' placeholder='De' required="true"/>
        <label>A: <span>*</span></label>
        <input type='email' id='email_to' placeholder='Destinataire' required="true"/>
        <label>Sujet: <span>*</span></label>
        <input type='text' id='email_subject' placeholder='Sujet' required="true"/>
        <label>Message:</label>
        <textarea id='email_message' placeholder='Votre Message'></textarea>
        <div class='email_submit'>Envoyer email</div><div id='email_returnmessage'></div>
    </div>
</div>

然后我有一個按鈕觸發jsPanel：

$('#new_document').click (function () {
    var content = $('#email_content_hidden').html();

    $.jsPanel({
        content:        content,
        position:       "center",
        theme:          "success",
        title:          "Nouveau document/email",
        size:           {   width:  function(){ return $(window).width()*0.75 }, 
                            height: function(){ return $(window).height()*0.75 } },
        toolbarFooter:  "<i>Popup footer</i>",
    });
});

如您所見，我將隱藏的div的代碼復制到了jsPanel中。

問題是分配給的click事件不會觸發：

$('.email_submit').click(function() {
   console.log('submit email');
});

任何想法 ？

Answer 1

您必須委托事件，否則新添加到DOM的元素將不會綁定事件：

$(document).on('click', '.email_submit', function() {
   console.log('submit email');
});