jQuery click event does not trigger when duplicating an element

Question

I have a hidden div which has some content :

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

Then I have a button which triggers a 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>",
    });
});

As you can see I duplicate the code of the hidden div into my jsPanel.

The problem is that the click event which was assigned to does not fire :

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

Any idea ?

Answer 1

You have to delegate the event, otherwise newly appended elements to the DOM won't have the event bound:

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