How not to activate js inherited function?

Navigation
2

As you can see in the example below, I have a collapsible and in the initial structure I have a button / link (sign of the example), I would like to be able to push this button and not activate the function that expands the collapsible

link 

$('.collapsible').collapsible(); 
function fazalgo () {
  console.log(":)");
}
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
          <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <ul class="collapsible">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
              <a onclick='fazalgo()' class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second
              <a onclick='fazalgo()' class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
              <a  class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
        </ul>
    
asked by anonymous 16.07.2018 / 14:28

3 answers

1

Hugo's answer already answers, but I leave here a solution with only js: 

$(".collapsible").collapsible();

$("a").on("click", function(e) {
  e.stopPropagation(); 
  console.log("Outra função aqui");
})
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<ul class="collapsible">
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
           <a  class="secondary-content"><i class="material-icons">add</i></a>
         </div>
         <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
     <li>
         <div class="collapsible-header"><i class="material-icons">place</i>Second
            <a  class="secondary-content"><i class="material-icons">add</i></a>
         </div>
         <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
     <li>
         <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
            <a  class="secondary-content"><i class="material-icons">add</i></a>
         </div>
         <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
 </ul>
    
16.07.2018 / 17:41
1

To do this you need to strip the + icon from within the .collapsible-header div that is responsible for the collapse function. So you unlink the + icon of this function executed by clicking on the div .collapsible-header '.

To align the icon I needed to make a small CSS for + to be right aligned.

Notice that now when you click + collapse does not happen so you can build your function separately and without affecting the behavior of collapse . 

$('.collapsible').collapsible();
$(".mais").click(function(){
    console.log("+ clicado");
});
.collapsible .mais {
    padding: 1rem;
    position: absolute;
    right: 0;
  }
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
  <!--JavaScript at end of body for optimized loading-->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    
<ul class="collapsible">
  <li>
    <a  class="secondary-content mais" href="#"><i class="material-icons">add</i></a>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
      <a  class="secondary-content mais" href="#"><i class="material-icons">add</i></a>
    <div class="collapsible-header"><i class="material-icons">place</i>Second
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
      <a  class="secondary-content mais" href="#"><i class="material-icons">add</i></a>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>
    
16.07.2018 / 15:34
1

I decided this way, not so elegant, closing the collapse so I use the function 

$('.collapsible').collapsible(); 
function fazalgo () {
  console.log(":)");
}
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
          <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <ul class="collapsible">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
              <a onclick="$('.collapsible').collapsible('open', '0');" class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second
              <a onclick="$('.collapsible').collapsible('open', '1');" class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
              <a  onclick="$('.collapsible').collapsible('open', '2');" class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
        </ul>
    
16.07.2018 / 15:54
Go through a bash script array Procedures after errors should be in the services / validations or in the controller?