html読み込み後に、jQueryで追加した要素に対するイベントが動作しない

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件

ベストアンサー

☓を押下した際の以下のコードを

javascript
1$(function(){
2    $("span.remove").on("click",function(){
3    $("span.badge").remove();
4 });
5 });

↓のように変更するとうまくいくかもしれません。

javascript
1$(function () {
2    $(document).on('click', 'span.remove', function(){
3        $("span.badge").remove();
4     });
5});

投稿2015/12/03 00:24

Kaoru_A

総合スコア124

退会済みユーザー

2015/12/03 13:31

できました！ありがとうございました。

行動規範の内容に同意します

せめてjsで使っている要素のHTMLは提示しないと(Jqueryのバージョンだったり)
デバックがむずかしいですね。

本題の原因は、
①
Syntaxエラーになっている。

修正後は

javascript
1<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
2<script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
3<script type="text/javascript">
4$(function(){
5
6	var availableTags = [
7      "java",
8      "abc"];
9
10    $( "#tags" ).autocomplete({
11      source: availableTags,
12      autoFocus: true,
13	  delay: 500,
14	  minLength: 1,
15	  select: function(event, ui)
16	  {
17	  	$("#tagdiv").append("<span class='badge'>selected!  <span class=\"glyphicon glyphicon-remove remove\"></span></span>")
18	}
19    });
20  });
21
22
23$(function(){
24    $ele = $("span.remove");
25    $ele.on("click",function(){
26    //$("span.remove").on("click",function(){
27    	$("span.badge").remove();
28    })
29 });
30</script>
31
32<span class="remove">test   <span class="glyphicon glyphicon-remove"></span></span>
33
34<input id="tags" type="text"></input>
35<div id="tagdiv"></div>