jquery classのつけ外しについて

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>タグ入れ替え</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul{
      margin: 20px;
    }
    li{
      border: solid 1px;
      display: inline-block;
      margin-bottom: 20px;
    }
    .tag_span{
      background: #ddd;
      margin-right: 5px;
    }
  </style>
</head>
<body>
<ul>
  <li id="usertag_div">
        <span class="tag_span">タグ１<span class="tag_span_close">×</span></span>
        <span class="tag_span">タグ２<span class="tag_span_close">×</span></span>
  </li>
  <br>
  <li class="usertag_div">
      <span class="tag_span">タグ３<span class="tag_span_add">+</span></span>
      <span class="tag_span">タグ４<span class="tag_span_add">+</span></span>
      <span class="tag_span">タグ５<span class="tag_span_add">+</span></span>
  </li>
</ul>

<script>
	$(".tag_span_close").click(function() {
        var tagSpan = $(this).parent();
        $(this).text('+');
        $(this).removeClass('tag_span_close');
        $(this).addClass('tag_span_add');
		$(tagSpan).appendTo(".usertag_div");
	});
	$(".tag_span_add").click(function() {
        var tagSpan = $(this).parent();
        $(this).text('×');
        $(this).removeClass('tag_span_add');
        $(this).addClass('tag_span_close');
		$(tagSpan).appendTo("#usertag_div");
	});
</script>
  
</body>
</html>

classをつけたり、外したりして、タグを上下の枠内間で連続して移動したいです。
1回目は移動できますが、2回目がうまくいきません。
どのように書けばよいでしょうか？

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

回答1件

ベストアンサー

jQueryは読み込み時の属性をひっぱりますので、clickメソッドなどは
そのままでは処理できません。
onをつかって第２引数にセレクターを指定します

javascript
1$(".tag_span_close").click(function() {
2↓↓↓
3$(document).on('click','.tag_span_close',function() {
4
5$(".tag_span_add").click(function() {
6↓↓↓
7$(document).on('click','.tag_span_add',function() {