Remove Event/Function - jquery

Question

I have the following function:

function paper_collapse() {
    $(".collapse-card").paperCollapse();
}

This function is always called when the page is loaded.

$(document).ready(function() {
    paper_collapse();
});

Now, through an event click, I will add some items to the object, and again I will need to call the function paper_collapse.

It turns out that when I do this, the application has a behavior contrary to what I need, this, because this same function has already been called once in the page load.

What I want to do is, remove the function that was called earlier in page loading.

This is possible ?

Example: $(paper_collapse).unbind(); or .off

Answer 1

Taking a quick look at the library code I did not find resources to destroy or remove the behaviors after initialized. You would have to implement the functionality you want. Github - paper-Collapse

But you do not need to remove and reapply the collapsePaper() just because you changed your DOM. You can do so, by adding new items, create the elements by adding a class pending-paper and apply the collapsePaper() only in them. Then remove the class so you have no problems adding new items.

Example:

$(document).ready(function(){

  $('.collapse-card').paperCollapse();

});

$("#adicionar").on('click', function(){
  
  //Ao criar um novo item, adicione a classe pending-paper
  $("#lista-container").append(
        '<div class="collapse-card pending-paper">' 
        +'  <div class="collapse-card__heading">'
        +'    <div class="collapse-card__title">'
        +'      <i class="fa fa fa-smile-o fa-2x fa-fw"></i>'
        +'      Novo Item adicionado'
        +'    </div>'
        +'  </div>'
        +'  <div class="collapse-card__body">'
        +'    Olar!'
        +'  </div>'
        +'</div>');
   //Aplica o paperCollapse() e remove a classe pending-paper     
   $('.pending-paper').paperCollapse();
   $('.pending-paper').removeClass('pending-paper');
});

@import 'https://bbo-code.com/assets/application-36f0df9269ad8b7eb9e05875a73766db8e7b3330bc5609acfb7334150dc334bf.css';
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
@import 'https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://bbo-code.com/assets/application-5b0731ecc07adfb7c609f672d05f786a5cf6c9c25f3d16fa3cb841eaae11613b.js"></script>
<div class="flex-container row justify-content-center pb2">
      <div id="lista-container" class="flex-item col-sm-9">
        <div class="collapse-card">
          <div class="collapse-card__heading">
            <div class="collapse-card__title">
              <i class="fa fa-question-circle fa-2x fa-fw"></i>
              Well, hello there
            </div>
          </div>    
      </div>
    </div>
</div>
<center>
<button id="adicionar">Adicionar</button>
</center>