javascript - 复制元素时，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

您必须委托(delegate)该事件，否则新添加到 DOM 的元素将不会绑定(bind)该事件:

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