Help us understand the problem. What is going on with this article?

jQueryでシンプルなオリジナルのボードゲームを作れるwebアプリを作る

前置き

1ヶ月前にプログラミングを学び初めて1ヶ月経ってので備忘録として作ったwebサービスを公開してみようと思います。
制作期間は4日くらい、主にjQueryを使用しました。

デモ

仕様について

シンプルに「background-color」「border-radius: 50%;」で駒を作成し
文字の色と大きさを決めて書き込めるようにしています。
ダブルクリックすると作成した裏面に切り替わります。
jQuery uiを入れればドラッグ&ドロップはできるのでそれをマス目にハマるようにしています。

index.html
function drag() {
  // 駒をdrag可能にしてテーブルにくっつける
  $(".drag").draggable({ 
     snap: ".kuttuku"        
   });
  };

あとはlocalStorageにJSONを使って駒のデータを保存できる仕様にしています。

index.html
function komaImg(basyo,num,color,name,) {
    let getId = $(this).attr('id');
    basyo = "#k"+getId;
    bcolor = $(".b"+getId).val();
    name = $("#n"+getId).val();
    fontsize = $("#f"+getId).val();
    color = $(".c"+getId).val();
            $(basyo).html('<div class="hukusei" id="id'+getId+'"style="background-color:'+bcolor+'" >'+name+'</div>');
            $(basyo).css("font-size",fontsize+"px");
            $(basyo).css("color",'"'+color+'"');
            let n = [];
            n.push(name,bcolor,fontsize,color);
      localStorage.setItem(getId,JSON.stringify(n));

        };

わかりにくくて恐縮ですが、駒作成のテーブルにそれぞれidとclassを振り分けて
クリックした駒作成ボタンのidを拾い、そこから色やフォントサイズを振り分けています。

作成してみて

つまずいたポイントとしては、動的に生成した要素のクリックイベントが動かない問題でした。
もし同じように困っている方がいらっしゃれば、とりあえず生成する関数の内部にconsole.logを入れてみれば解決していくと思います。

あとは今後の課題としてiOSで動作させた時にタッチが反応しないケースがあり、どうやらdiv要素で囲っていた事が原因のようでしたので、         ∫
こういったアプリを作ってみたい方は初めからスマホやタブレットで動かすことを意識してタグ付けした方がいいかと思います。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away