jquery onが効かない

jqueryで処理を書いているのですが、あとから追加した要素にonを使っても無反応になってしまいます。

$(function(){
    
    $("#add1").on("click",function(){
        $('[name=other1],[name=other1_test],[name=other1_test2]').prop('disabled', false);
        $("#add1").after('<a href="#" class="del" id="del1">-</a>');
        $("#add1").remove();
        return false;   
    });
    
    $("#del1").on("click",function(){
        $('[name=other1],[name=other1_test],[name=other1_test2]').prop('disabled', true);
        $("#del1").after('<a href="#" class="add" id="add1">+</a>');
        $("#del1").remove();
        return false;   
    });
});

<tr>
 <td><a href="#" class="add" id="add1">+</a></td>
 <td><input type="text" disabled name="other1"></td>
 <td><input type="text" class="test" disabled name="other1_test"></td>
 <td><input type="text" class="test" disabled name="other1_test2"></td>
</tr>

htmlは一部の抜粋となってますが、jqueryに関係しているのはここだけです。

の部分をクリックすると

<a href="#" class="del" id="del1">-</a>に変わり、disabledが無効になります。（ここまでは動いてます）その後変わった<a href="#" class="del" id="del1">-</a>の部分を押すと元に戻るように動かしたいです。おかしいところがどこなのか見当がつかないので、どなたかご助力ください。

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

回答2件

FireFox、jQuery1.9.1で確認しました。

javascript
1	$(document).on("click", "#add1", function(){
2        $('[name=other1],[name=other1_test],[name=other1_test2]').prop('disabled', false);
3        $("#add1").after('<a href="#" class="del" id="del1">-</a>');
4        $("#add1").remove();
5        return false;
6    });
7    $(document).on("click", "#del1", function(){
8        $('[name=other1],[name=other1_test],[name=other1_test2]').prop('disabled', true);
9        $("#del1").after('<a href="#" class="add" id="add1">+</a>');
10        $("#del1").remove();
11        return false;
12    });