タグ入力補助ツール

Google＋の公開範囲指定部分のUIを求められる事が多くなってきている気がしますが、
その中でちょっと良さそうなものを発見したので、メモメモ

・Selectize.js
http://brianreavis.github.io/selectize.js/

・Tag-it!
http://aehlke.github.io/tag-it/

使うならSelectize.jpで問題あればTag-it!に切り替えるかな。。
他のは今のところ良さそうなのが、今のところ見つけておらず。。

クリックイベントをセットした時の奇妙な動作について

<td>タグの中に<select>を設置した。

そして<td>にclickイベント、<select>にchangeイベントを設定。

すると<select>から<option>を選択した時にclickイベントまで発生してしまう。

ま～それは納得できるとして、問題はその対策として<td>をクリックした時だけ<select>を表示するようにして<td>をクリックした時はunbindするようにしてchangeイベント完了時にtdへclickイベントを再設定するようにした。

それでもchangeイベントの後にclickイベントが発生する。。　なぜ。。

JavaScript JQuery JqueryId を利用する際の注意

JQuery　では　独自のIDを各オブジェクトに持たせて管理するようにしている。

これがちょっと勘違いしてしまいがちで、

foo

というものがあった場合に

$('li') で取得できる。
これは配列ライクに取得するので、 li == $('li') とはならない。

これは解りやすいんだけども、これと同じようにもし

$.data($(this)) という場合には　$(this) != this となる。
雰囲気的には同一なものを参照するには　$(this[0]) == this　というニュアンスになる。

以下実際にハマったパターン。。。

$.data($(this).parent())

で全く違うIDが来るので何故。。。と思っていたらこうだったｗ

$.data($(this).parent()[0]

これすぐ忘れてしまう。。。

JQueryを利用して簡単に行を追加

以下のHTMLの状態で下記JavaScriptを実行すると行が追加される。

<table id="hoge">
    <tbody>
    <tr>
        <td>col1-row1</td>
        <td>col2-row1</td>
    </tr>
    </tbody>
</table> 

▼JavaScript 

$('#hoge').append(''
    + '<tr>'
    +   '<td>'
    +       'col1-row2'
    +   '</td>'
    +   '<td>'
    +       'col2-row2'
    +   '</td>'
    + '</tr>'
    ;
); 

これってようするに 

$('#hoge')[0].innterHTML = $('#hoge')[0].innterHTML
    + '<tr>'
    +   '<td>'
    +       'col1-row2'
    +   '</td>'
    +   '<td>'
    +       'col2-row2'
    +   '</td>'
    + '</tr>'
    ;
  

と一緒か。。。？

でも下記の方が早いみたいですね。。。

$('#hoge').append(
    $('<tr>').append(
        $('<td>').text('col1-row2')
    ).append(
        $('<td>').text('col2-row2')
    )
);