0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

MaterializeのChipsでつまづいた

Posted at

はじめに

ポートフォリオ作成中に使い慣れたbootstrapからmaterializeに挑戦中なのですがjqueryのプラグインの導入の際につまづいたので備忘録として残します。

やりたいこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512759/beec31eb-3555-8215-8f42-421c3ef3882a.png) エンターキーを押したら画像のようにタグを出現させたい

つまづきポイント

公式のリファレンスにはscriptを書いてクラス名にchipsとつけるくらいしか書かれていない。見様見真似でやってみると中々フォームが出てきてくれませんでした。

つまづいていた時のコードがこちらです。
image.png

chipsの中でformに書きたかったのでformをchipsで囲んでいました。
jqueryの読み込む順番からscriptの書き方など見直していましたが思い通り動きませんでした。

解決法

公式ページでchipsの動きを見ているとchipsの中でchipが生成されており、タグを打つたびにchipができていました。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512759/12698674-596a-4f22-7b64-00e3f1934bd6.png) 余計なものを入れるなってことですかね。これで動きました。

地道に検証モードで見ていくとエラーが分解されていきました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?