Question

jsFiddle of my code: http://jsfiddle.net/8Vcyu/

I have setup a form where the user can input between 1 and 10 lines of information. If the user adds a 10th line jquery removes the ‘add row’ button. If the 10th line is removed the add button comes back. This all works well, but when the ‘add row’ button is appended back into the page, it no longer functions – no new row is added. Any help is really appreciated, this problem is stumping me.

HTML

<form name="input" action="/engine/preview.php" enctype="multipart/form-data" id="customizeForm" method="post">
    <div id="customize_container">
        <div id="customize_right">
                <table class="customize_table">
                    <tr class="tr_clone">
                        <td>
                            <input type="text" name="title[]" value="NAME" maxlength="12" />
                        </td>
                        <td>
                            <input type="text" name="entry[]" value="Your Name" maxlength="20" />
                        </td>
                        <td>
                            <a href="#" class="closeRow"></a>
                        </td>
                    </tr>
                    <tr class="tr_clone">
                        <td>
                            <input type="text" name="title[]" value="NAME" maxlength="12" />
                        </td>
                        <td>
                            <input type="text" name="entry[]" value="Your NAME" maxlength="20" />
                        </td>
                        <td>
                            <a href="#" class="closeRow">remove</a>
                        </td>
                    </tr>
                    <tr class="tr_clone">
                        <td>
                            <input type="text" name="title[]" value="NAME" maxlength="12" />
                        </td>
                        <td>
                            <input type="text" name="entry[]" value="Your ID" maxlength="20" />
                        </td>
                        <td>
                            <a href="#" class="closeRow">remove</a>
                        </td>
                    </tr>
                    <tr class="tr_clone">
                        <td>
                            <input type="text" name="title[]" value="NAME" maxlength="12" />
                        </td>
                        <td>
                            <input type="text" name="entry[]" value="Your Account Name" maxlength="20" />
                        </td>
                        <td>
                            <a href="#" class="closeRow">remove</a>
                        </td>
                    </tr>
                    <tr class="tr_clone">
                        <td>
                            <input type="text" name="title[]" value="LABEL" maxlength="12" />
                        </td>
                        <td>
                            <input type="text" name="entry[]" value="Information" maxlength="20" />
                        </td>
                        <td>
                            <a href="#" class="closeRow">remove</a>
                        </td>
                    </tr>
                </table>
                <div id="add_row_button">
                    <input type="button" name="add" value="Add" class="tr_clone_add" />
                </div>
        </div>
        <div class="clear"></div>
        <input type="submit" value="Preview Your Card" class="preview_cards" />
    </div>
    </form>

JS

function countRows() {
  return $(".customize_table tr").length;
}

$(".closeRow").on('click', function() {
    $(this).closest('tr').remove();
    var $rows = countRows();
    if($rows == 9) {
        $("#add_row_button").append("<input type='button' name='add' value='Add' class='tr_clone_ad' />");
    }
});

$("input.tr_clone_add").on('click', function() {
    var $rows  = countRows();
    if($rows <= 9) {
        var $tr    = $("table.customize_table tr:last-child");
        var $clone = $tr.clone( true );
        $tr.after($clone);
        $rows  = countRows();
        if($rows == 10) {
            $(".tr_clone_add").remove()
        }
    }
});

$(document).ready(function() {
    $("#customizeForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText,
                'minWidth' : 800,
                'minHeight' : 600,
                'scrolling' : 'no',
                'type' : 'iframe',
            });
        }
    }); 
});

Answer 1

You should use the delegation method of on() –

$('body').on('click', 'input.tr_clone_add', function(){...