-3

I'm making a modal with register, login and forgot password forms, and I'm playing with divs by hiding and showing them. I did this trick of cloning the content when closing the modal but none of the elements inside responds to the jQuery assigned to them.

This is the code that clones:

var login_modal = $('.md-modal.login-modal');
var originalState = login_modal.clone();

login_modal.find('.md-close').click(function(){
   login_modal.replaceWith(originalState);
});

This is the an example of the code that doesn't work after cloning:

$('#email-register').click(function() {
   $('#multi-login-box').hide();
   $('#register-box').show();
});
Community
  • 1
  • 1
therealbigpepe
  • 1,489
  • 2
  • 16
  • 23
  • 1
    When cloning the clone is floating around son you must append it to DOM – zer00ne Oct 04 '16 at 16:19
  • 1
    Read the docs for `.clone()`. –  Oct 04 '16 at 16:23
  • I assume that `login_modal.find('.md-close').click(function(){` won't work after cloning either? Since `'.md-close'` is a part of the clone you should clone the clone (`originalState`), once clone is appended to DOM it doesn't exists anymore as clone... I think there's a better approach for what you want to achieve, but you should put more details in your question. – Artur Filipiak Oct 04 '16 at 17:23

2 Answers2

0

The main problem that is see is that you assign the handlers to the original elements after you have cloned it. So the clone will not have these handlers bounds. (you also need to tell the .clone method that you want the handlers to be cloned as well, but that is assuming that you already have some handlers bound at cloning time)

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 1
    How do you know when the handlers are bound. The OP is showing the handler in question in a separate code block. I don't think we can assume that's the same order in the actual code. –  Oct 04 '16 at 16:31
-2

Take a look at the jQuery clone documentation. You can pass a bool to .clone to copy handlers.

EDIT: You would need to attach the handler to the original element before cloning, as well as perform a deep clone:

login_modal.clone(true, true);
Tyler Burki
  • 197
  • 7
  • 1
    @RobertParham: How do you know that? –  Oct 04 '16 at 16:26
  • @RobertParham is right since the clone is occurring and then the handler is being attached on the next line. OP would need to flip-flop those. – Tyler Burki Oct 04 '16 at 16:33
  • 1
    @TylerBurki: Look again at the question. The handler that is not being duplicated is shown in a separate code block. How do you know where that binding is actually taking place? The "next line" code isn't the problem code. Looks to me like that line is intentionally post-clone. Your answer is closest to correct from what we're given. –  Oct 04 '16 at 16:35
  • @squint I guess I just took that example with a grain of salt since none of the elements listed in it exist in the first part of the question. I'm assuming it is just another "example" of the first scenario. Regardless, I think the real answer here is to read some documentation. – Tyler Burki Oct 04 '16 at 16:38