Remove Event / Function - jquery

Question

Remove Event / Function - jquery

Navigation

#1 by (2 votes)

0

I have the following function:

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

This function is always called when the page loads.

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

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

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

What I want is, remove the function that was called before loading the page.

Is this possible?

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

jquery

asked by anonymous 18.01.2018 / 14:36

1 answer

Removing spaces and accents with PHP Servlet is responding but ajax does not reflect response

score 2 · Accepted Answer

Giving a quick glance at the library code I did not find the resources to destroy or remove the behaviors after initialization. You would have to implement the functionality you want. GitHub - paper-collapse

But you do not have to remove and reapply collapsePaper() just because you have changed its DOM . You can do this by adding the new items, create the elements by adding a class pending-paper and apply the collapsePaper() only to them. Then remove the class so you do not have 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><scriptsrc="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>