Understanding Materialize predefined functions for "chips"

Understanding Materialize predefined functions for "chips"


I’m using the “chip” class in the Materialize framework for my Twitch project: http://codepen.io/AbdiViklas/pen/PzgRbj?editors=0010 . I’m also working on storing the list of channels in localStorage. The .chip class comes with a handy little “close” button, which works great at getting the chip off the screen, but now I want to write a function that says “and stay out,” deleting the value from localStorage. Materialize seems to have something like that set up, but frankly I need a translator.

  1. I hear a lot about “Initialization.” I’m already using these “chips” as a css class. Do I need to include this “jQuery initialization” block of code in order to use the functions that follow?
  2. In http://materializecss.com/chips.html#events, there’s the chips.delete function that I need. But when it says function(e, chip)–what is e? And what exactly is chip–the data inside it? the html?
  3. These examples use the class chips. Higher on the page, when it’s just talking about the css, it uses chip, no “s”. Is this significant?

I tried this:
``$(’.chip’).on(‘chip.delete’, function(e, chip){
… changing “chips” to “chip,” since I actually use that class, and nothing was logged when I clicked an X. I’m stumped.


So I copied examples from materialize page to codepen http://codepen.io/jenovs/pen/qaarrk?editors=1010 and played a little and I’ll try to answer your questions.

  1. Yes. Without initialization those ‘chips’ don’t have listeners.

  2. e is event, every js event listener dispatches some event, and chip is object with data which was inside the deleted chip (it is the chip). You can call it as you like.

  3. chips is a field where you can enter multiple chips, chip is an individual chip (see my codepen).

But I’ve never used Materialize, so I may be completely wrong, but to me it looks like you are creating yourself unnecessary difficulties.