Jquery / Ajax重复追加

Question

我有以下功能可以成功地从我的ajax中恢复数据，但是点击添加选项行按钮并添加子选项似乎添加了另一个选项/行，我需要它只返回从回来的数据ajax将1个项目调用到当前区域。出于某种原因，我认为它没有被重置？如果我刷新页面，则不存在额外的行。

这是我的JS：

function proOption(){

    $('#addProOption').click(function(e){
        $.getJSON('/ajax.html?type=option_type&id='+_id, function(_rowdata){
            if (_rowdata.ok == 1){
                $('#productOptions').append(_rowdata.o_form).show(500,function(){
                    proOption();
                    proSubOption();
                    proOptionDel(); 
                });
            }
        });
        e.preventDefault();
    });
}

function proSubOption(){

    var _optionLink = $('#form').find('.addRow');
    _optionLink.click(function(e){

        var _pid    = $(this).data("pid");
        var _optionSub  = $('#option_' + _pid + ' .optionSub');

        $.getJSON('/ajax.html?type=option&id='+_id+'&pid='+_pid, function(_data){
            if (_data.ok == 1){
                _optionSub.append(_data.o_form).show(500,function(){
                    proOption();
                    proSubOption();
                    proOptionDel(); 
                });
            }
        });
        e.preventDefault();
    });
}

function proOptionDel(){

    var _optionDelLink = $('#form').find('.deleteOption');

    _optionDelLink.click(function(e)
    {
        var _optionID   = $(this).data("id");
        var _optionSub  = $(this).parent().parent().parent();

        $.getJSON('/ajax.html?type=option_del&id='+_optionID, function(_rowdata){
            if (_rowdata.ok == 1){
                $(_optionSub).remove();
            }
        });
        e.preventDefault();
    });
}

proOption();
proOptionDel();
proSubOption();

这是我的Html：

<form id="form" action="" method="post" enctype="multipart/form-data">
    <div id="productOptions">
        <div class="row-fluid" id="option_210">
            <div class="option">
                <div class="span11">
                    <label>Description:</label>
                    <input type="text" name="option_desc[]" maxlength="255" value="">
                </div>
                <div class="span1">
                    <label>&nbsp;</label>
                    <a href="#" data-id="210" class="btn btn-small btn-red deleteOption"><i class="icon-trash"></i></a>
                    <input type="hidden" name="option_id[]" value="210">
                    <input type="hidden" name="option_pid[]" value="0">
                    <input type="hidden" name="option_price[]" value="0">
                </div>
            </div>
            <div class="optionSub">
                <div class="sub">
                    <div class="row-fluid">
                        <div class="span6">
                            <label>Option:</label><input type="text" name="option_desc[]" maxlength="255" value="">
                        </div>
                        <div class="span5">
                            <label>Price:</label><input type="text" name="option_price[]" maxlength="255" value="0.00">
                            <input type="hidden" name="option_id[]" value="211">
                            <input type="hidden" name="option_pid[]" value="210">
                        </div>
                        <div class="span1">
                            <label>&nbsp;</label>
                            <a class="btn btn-mini btn-default deleteOption" data-id="211" href="#"><i class="icon-trash"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <a data-pid="210" href="#" class="addRow btn btn-default">Add New Row</a>
            </div>
        </div>
    </div>
    <a id="addProOption" data-pid="124" href="#" class="floatRight btn btn-default addOption">Add New Option</a>
</form>