title: Jquery flip stops working after recalling function
body: <p>I have a main function and I am recalling it with other values after a click on a menu. After that action (click on menu button) my #card stops flipping on click. it seems like I am removing event handler or sth in wrong place, but I have no idea where..</p>
  
  <p>the html is simple. there is a card div:</p>
  
  <pre><code>&lt;div id="card"&gt;
  
    &lt;div class="front"&gt;
      &lt;div class="title"&gt;&lt;/div&gt;
      &lt;h2&gt;Ups&lt;/h2&gt;
      &lt;p&gt;Nic tu nie ma!&lt;br&gt;:(&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="back"&gt;
      &lt;p&gt;:(&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the menu div:</p>
  
  <pre><code>&lt;div class="navigation" style="display: none;"&gt;
  &lt;ul&gt;
    &lt;li class="first-menu navigation-item"&gt;(...)&lt;/li&gt;
  
    &lt;li class="second-menu navigation-item"&gt;(...)&lt;/li&gt;
  
    &lt;li class="list-words navigation-item"&gt;(...)&lt;/li&gt;
  
    &lt;li class="shuffle navigation-item"&gt;(...)&lt;/li&gt;
  
    &lt;li class="reverse-cards navigation-item"&gt;(...)&lt;/li&gt;
  
    &lt;li class="start-quiz navigation-item"&gt;(...)&lt;/li&gt;
  
    &lt;li class="return navigation-item"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now, the js.</p>
  
  <p>There is a navigate() function, which shows and hides the menu, and allows user to turn back to the "first menu", which means, turn back to the choose of main chapter.</p>
  
  <p>Never mind, I mean that there are three menus. two of them causes an ajax call and show the flash-card with chosen words. I have problem with third menu, (on the right top corner of page). this menu should let user mix the flash-cards, reverse it, navigate etc. The problem occures after a click on each item in this menu.</p>
  
  <p><a href="https://i.stack.imgur.com/KIFiH.png" rel="nofollow noreferrer">this picture shows items on this menu</a></p>
  
  <p><a href="https://i.stack.imgur.com/qFLit.png" rel="nofollow noreferrer">this picture shows the #card</a></p>
  
  <p>Before the click, the main card flips without problem.
  but when you mix the words, or click other menu item, it stops flipping on click.</p>
  
  <p>Ok, now the code:</p>
  
  <p>this is the main function which let user change words on #card, mix them etc.</p>
  
  <pre><code>function main(){
  
  (...)
  
  $('.second-menu').click(function () { //turn back to the second menu
    $('#main-container &gt; div:not(.title-div, .list-icon)').fadeOut(0);
    $('.navigation').fadeOut(0); //.navigation -&gt; this is the third menu
    $('.menu2').fadeIn(0);
  });
  
  $('.list-words').click(function () { //this allows to change the view
    $('#main-container &gt; div:not(.title-div, .list-icon)').fadeOut(0);
  
    $('.list-words-tiles &gt; li').remove();
    $('.navigation').fadeOut(0);
    for (var i = 0; i &lt; Object.keys(responceData).length; ++i) {
      $('.list-words-tiles').append('&lt;li class="words"&gt; &lt;div class="front"&gt;&lt;div&gt;' + responceData[i].q + '&lt;/div&gt;&lt;/div&gt;&lt;div class="back"&gt;&lt;div&gt;' + responceData[i].a + '&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;');
    }
    $('.list').css("display", "flex");
  
    $('.words').off('flip').flip({ //maby here??
      "forceHeight": true,
      "forceWidth": true
    });
    $(this).click(function () {
      $('.list').fadeOut(0);
      $('#card').fadeIn(0);
      main(responceData, reverse);
      return;
    });
  }); //here the "other view" ends
  
  $('.shuffle').click(function () { //mixing the words
    $('.navigation').fadeOut(0);
    main(shuffle(responceData), reverse);
    return;
  });
  
  $('.reverse-cards').click(function () { //reversing
    $('.navigation').fadeOut(0);
    main(responceData, !reverse);
    return;
  });
  
  }
  </code></pre>
  
  <p>And in the document.ready I have a flip handler:</p>
  
  <pre><code>$('#card').off('flip').flip({
  "speed": "600",
  "forceHeight": "100%"
  });
  </code></pre>
  
  <p>As you can see, on each "third menu" item click, the main function is recalled to introduce changes, (show mixed or reverse words starting with first element in array).</p>
  
  <p>So why does flip stop working after that actions?</p>
  
  <p>Here you can see the issue: <a href="http://fiszki.janek.ovh" rel="nofollow noreferrer">link</a></p>