How not to enable inherited js function?

Asked

Viewed 53 times

2

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

https://jsfiddle.net/d5th7o6r/7/

$('.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>

      <script src="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>

javascript jquery materialize

  • If it’s not to expand Collapse when you press + what do you want it to perform when you click +? Your question is confused... You want each + to just expand and collect its own content, not that by clicking on one it expands and the other collection is this?

  • no, in case the + button triggers another function, q in my problem would be to add the item in a shopping bag. (I will try to fix the code)

  • Dude then why use the Collapse component for that? Or you want to have Collapse, but you want btn + to not open Collapse and do something else?

  • that, I want the button to call a different function, it will run it and not open Collapse, but the rest of the field will still open the same

  • How so the rest of the field will still open the same? You want the button to open the Collapse yes or no?

3 answers

1

To do this you need to strip the icon + from inside the div .collapsible-header which is responsible for the Collapse. So you untie the icon + of that function executed by clicking on the div . Collapsible-header`.

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

Note that now by clicking + the Collapse does not happen and so you can build your function separately and without affecting the behavior of Collapse original.

$('.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>
  <script src="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>

  • Thank you, your solution was very interesting.

  • @Klebersonventura cool that liked, this was the way I found to unlink the + and its script from the original Collapse element. But sometimes someone who understands more than JS can have.

1

I resolved this way, not so elegant, closing the Collapse so q 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>

      <script src="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>

1


Hugo’s answer already serves you, but I leave here a solution only with 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>
<script src="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>

  • Cool! is this "stopPropagation(); " that cuts Collapse function? I had tried this with preventDefault but it had not worked rss

  • 1

    stopPropagation is jQuery and Javascript preventDefault, I found it strange tbm, I don’t know if it has to do with Collapse, but preventDefault didn’t work with me here tbm, nor the false Return, which are pretty much the same thing.

  • 1

    I started studying JS now, but I’ll always stay on it, vlw. No doubt, I can’t use normal JS methods within a jQuery function?

  • 1

    Your reply me servile perfect, worked the way I wanted. Thank you very much

  • @hugocsl can yes man, jQuery is Javascript with a simpler syntax, "almost" everything can be done only with jQuery, but sometimes it is necessary to use Javascript methods. Pose to use together, always taking care not to mix the syntax of one with the other.

  • Nice Kleberson who helped you.

Show 1 more comment

Browser other questions tagged javascript jquery materialize

You are not signed in. Login or sign up in order to post.