CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

Don't make work jquery function when appendTo?

I have two div and if I resize my page less than 768px then my .tFFiltre div is moving in .tFPopup div..so everything is okay so far but after moving I don't want to make work my js function

for example if you click change background checkbox button you will see background color is chancing but if I move my div in another div than don't change background color..so I mean I don't want to make work js function

$(document).ready(function(){
 $('#checkbox').change(function() {
  if ($(this).is(':checked')) {
   $("body").css("background","red");
  } else {
    $("body").css("background","white");
  }
});
  
});

$(window).resize(function() {
    if ($(window).width() < 768) {
        $('.tFFiltre').appendTo('.tFPopup');
    } else {
        $('.tFFiltre').appendTo('.backFilter');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tFFiltre backFilter">
  <h1>Hi this is my filter title</h1>
  <p>and this is my article for filter</p>
  <span>and I have some elements</span>
  <button>html button</button>
  <pre>code bla bla </pre>
  <xmp>
    <html>
      <head></head>
      <body></body>
    </html>
  </xmp>
  
  <input type="checkbox" id="checkbox"> <label for="checkbox">change background
</div>


<div class="tFPopup">
  <h3>.tFFiltre div will be moved here </h3>
</div>

Upvotes: 0

Views: 73

Answers (1)

ankit verma
ankit verma

Reputation: 616

$(document).ready(function(){
 $('#checkbox').change(function() {
  if ($(this).is(':checked')) {
   $("body").css("background","red");
  } else {
    $("body").css("background","white");
  }
});
  
});

$(window).resize(function() {

    if ($(window).width() < 768) {
    	$('#checkbox').off();
        $($('.tFFiltre')).appendTo('.tFPopup');
    } else {
    $('#checkbox').off();
        $($('.tFFiltre')).appendTo('.backFilter');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tFFiltre backFilter">
  <h1>Hi this is my filter title</h1>
  <p>and this is my article for filter</p>
  <span>and I have some elements</span>
  <button>html button</button>
  <pre>code bla bla </pre>
  <xmp>
    <html>
      <head></head>
      <body></body>
    </html>
  </xmp>
  
  <input type="checkbox" id="checkbox"> <label for="checkbox">change background
</div>


<div class="tFPopup">
  <h3>.tFFiltre div will be moved here </h3>
</div>

Please check the code
I have get the whole element and then appendto required position

Thanks

Upvotes: 1

Related Questions