ホーム » ブログ » JSで生成した要素をjqueryのイベントを効かない現象
このエントリーをはてなブックマークに追加
@2014/03/14
開発中でJSで生成したHTML要素にjqueryで書かれたclickイベントが効かない現象がありました。いろいろお調べたところ、javascriptからあとから生成したHTML要素は、もともと書かれたclickなどのイベントを勝手に移除されるようです。
僕の対策は、JSで生成したHTML要素に再度clickなどのイベントをbindする。
例(抜粋):
// イベントを付けたい要素
$("#myEvt").empty();
// 要素にHTML要素を書き込み
$("#myEvt").append("<span>クリック</span>");
// 要素に再度イベントをbindする
$("#myEvt").bind("click", yourEvtFunction);
そうすると、ID=#myEvt要素にclickイベントを入れました。その要素をクリックするとイベントを正しく動けると思う。

また、jqueryで.live()を使えば、JSで生成したHTML要素を再度bindしなくでもイベントを動くと思いますが、なんかjquery1.9.Xから.liveを廃止されたようですので、残念。

以上、メモを。


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/179.html

コメント@2014年03月14日
Gravatar-グローバルに認識されるアバター_zanmai.net
$().click() はHTMLで最初にDOMが構築されるときに書いていないとイベントに登録されないようです。そのため、後からJSで作成したHTML要素にclickイベントを登録してない、動かない。JSでHTML要素を作成してから、もう一度clickイベントを登録すれば問題なく動く。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check