复制元素时不会触发jQuery单击事件

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中。

问题是分配给的点击事件不会触发：

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

有什么想法吗？

Answer 1

您必须委托该事件，否则新添加的元素将不会受到事件限制：

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