jQueryのappendで、事後的(html読み込み後)に追加した要素をクリックすると、イベントが起こるようにしたいのですが、うまくいきません。
このteratailの質問投稿画面で、「タグ」を追加すると「jQuery ☓」と表示され、この「☓」をクリックすると、このタグが消えますが、これと全く同じことがしたいです。
(teratailのJavascriptを読み解くことができれば解決できるのですが、分かりませんでした。)
私が書いたコードは、下記のとおりです。
javascript
1$(function(){ 2$("#tags").autocomplete({ 3 source: availableTags, 4 autoFocus: true, 5 delay: 500, 6 minLength: 1, 7 select: function(event, ui){ 8 $("#tagdiv").append("<span class='badge'>selected! <span class=\"glyphicon glyphicon-remove remove\"></span></span>") 9} 10}); 11}); 12}) 13$(function(){ 14 $("span.remove").on("click",function(){ 15 $("span.badge").remove(); 16 }); 17 });
inputに何らかの文字を打ち込むと、autocompleteで表示がなされ、
例えば「jQuery ☓」のように表示がされます。
この「☓」をクリックすると、「jQuery ☓」が消えてほしいです。
現状では、「☓」をクリックしても何も起きません。
html読み込み時に既にある要素でテストするため、
html
1<span class="remove">test <span class="glyphicon glyphicon-remove"></span></span>
「test ☓」という記述を予めしておいて、「☓」をクリックしたところ、
うまく消えてくれたので、
jQueryで事後的に追加した要素に対してうまくいかないだけだと思います。
どのように対処すればよいかお分かりの方、ご教示頂けないでしょうか。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/12/03 13:31