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 ?

Try $(document).on('click','.email_submit',function(){//code here}) — Rayon
– Rayon, Commented Nov 2, 2015 at 19:16
Looks like this is generated dynamically, you will want to use a delegation with .on('click', ... ). — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 2, 2015 at 19:16

taxicala · Accepted Answer · 2015-11-02 19:16:29Z

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');
});

answered Nov 2, 2015 at 19:16

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Teyssier Over a year ago

Thanks a lot! I didn't know about event delegation.

Collectives™ on Stack Overflow

jQuery click event does not trigger when duplicating an element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related