Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery clone().show() is not working as expected

In Jquery 1.9.1 version,

var dialogDiv = $(`.dialog`).clone().show();
.dis-none {
   display: none;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dialog dis-none">
  <div class="boxcontent">content</div>
</div>

This will display the dialog content even if the dis-none class is not removed.

But why it is not working in 3.7.1 jQuery version??

In the lower version(1.9.1), the dialog div is cloned and appended to DOM and also displayed without any issues even if the dis-none is present because the show method overrides the effect of dis-none.

But in Upper version(3.7.1), the same code is not working as expected.

But What my question is without removing the dis-none class, is it any way to display the content with show method???

Tags:

2

Answers


  1. 0

    A cloned HTML has no meaning until it is appended to the DOM. You are just cloning the div HTML and trying to show it while it’s not present at all in the DOM.

    A sample code regarding how it will work:

    $('.dialog').clone().insertAfter('.dialog').show();
    .dis-none {
  display: none;
}
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<div class="dialog dis-none">
  <div class="boxcontent">here</div>
</div>
    Login or Signup to reply.
  2. 0

    First, great for getting the jQuery version updated, it will be faster and more secure and have more features.

    1. Clone has nothing to do with showing or hiding an element.
    2. We can cache an object so we only hit the DOM one time.
    3. You did NOT remove the class in your code so it remains hidden by the CSS you have.
    4. Having some actual content IN the HTML will help illustrate better the hide/show.
    5. Your chained jQuery code returns jQuery (the object selected) AND thus the .Show() applies to that clone not the original DIV you cloned from.
    6. You can also manipulate a clone before you add it somewhere

    So, let’s address each of those in turn in code starting with some text just to show what is going on.

    I added some comments in the code for some examples.

    $(function() {
  // cache each object
  let originalDialog = $(`.dialog`);
  let clonedDialog = $(`.dialog`).clone();
  //show original
  //  originalDialog.show();
  // another way to show/hide using a boolean:
  originalDialog.toggle(true);
  originalDialog.find(".boxcontent").text("New text!");
  /* put clone after the original so we see it has the original text */
  clonedDialog.find(".boxcontent").append(" New stuff added!");
  // add new class
  // clonedDialog.addClass('cool-thunder');
  //another way to toggle a class
  clonedDialog.toggleClass('cool-thunder');
  //up to here it was not in the DOM/body so let's append it now and show it
  clonedDialog.appendTo('body');
  clonedDialog.toggle(true);
});
    .dis-none {
  display: none;
}

.dialog {
  border: solid 1px #00ff00;
}

.dialog.cool-thunder {
  background-color: #00ffff20;
  margin: 1em;
  padding: 1em;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dialog dis-none">
  <div class="boxcontent">Original element</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search