[jQuery]bindについてわかったこと

・イベントによって生成された要素にbind()するには。 

生のHTMLに書かれた要素に対してイベント登録するには
単純にbind()すればよい。
だが、イベント発生後にJavaScriptで生成された要素に対してイベント登録するには
要素の作成時にbindしなくてはならない。

$("#submit-1528237246").bind("click", function (event) {
                $("#tags").append("<p><span class=\"tag\">"+$("#tag").val()+"</span> <span class=\"rm\">×</span></p>");
                rmTag();
});

function rmTag(){
    $(".rm").unbind();
    $(".rm").bind({
        click:function(event){
            $(this).parent().remove();
        },
        mouseenter:function(){
            $(this).css("cursor","pointer");
        },
        mouseleave:function(){
            $(this).css("cursor","default");
        }
    });
}

2行目によってクリック時に要素を追加する設定をしている。
ここで追加された要素に対してイベント登録するには、この作成時の時点で
イベント登録を行わなければならない。
なので3行目でイベント登録する関数を呼び出している。

・bindによるイベント登録は上書きではなくappend

ちなみに、7行目でunbindしているのは下記のサイトで説明されているよう
bindは上書きではなくappendしていくためだ。

jQueryのイベント時の関数を上書きする

上記のソースのようにイベント発生時にrmクラス全てにイベント登録して
いくと、最初の方にbindされた要素は同じイベント登録が複数回appendされて
しまうため、毎回全登録をunbindしている。

・一つの要素に複数のイベント登録をするには

また、一つの要素に複数のイベント登録をするには8～18行目のようにする。

・"hover"はbind()で使用できない。

 下記のようにhover()という関数を使ってイベント登録をできるが、
これをbind()で実現するには上記のソースのように、mouseenterとmouseleaveに
分けて記述する必要がある。

            $(function(){
                $(".rm").hover(
                    function(){
                        $(this).css("cursor","pointer"); 
                    },
                    function(){
                        $(this).css("cursor","default"); 
                    }
                );
                $(".rm").click(
                    function(){
                        $(this).parent().remove();
                    }
                );
            });