Jquery appended input button doesn't function with .on(click)

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',
            });
        }
    }); 
});

Jay Blanchard · Accepted Answer · 2013-01-31 23:14:42Z

2

You should use the delegation method of on() -

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

answered Jan 31, 2013 at 23:14

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Mountain Over a year ago

Thanks @JayBlanchard, I tried this but it doesn't seem to make the button function - could you provide a jsFiddle with a forked version? Thanks!

Hanlet Escaño · Accepted Answer · 2013-01-31 23:42:30Z

1

Two things: I Created a function that is in charge of binding the button to the click, and added it on $(document).ready() and also when the Remove button is clicked.

function bindAddButton()
{
    $("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()
            }
        }
    });
}

Also, I noticed that when you re-add your button, you are missing a "d" in the class name of your button:

$("#add_row_button").append("<input type='button' name='add' value='Add' class='tr_clone_ad' />");

which was making the code fail.

Here is a JSFiddle:

http://jsfiddle.net/8Vcyu/15/

answered Jan 31, 2013 at 23:42

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

1 Comment

Josh Mountain Over a year ago

Oh wow I can't believe I typo'd that, thank you! Fixing that typo and using Jay's suggestion got things working. Big thanks to both of you!

Collectives™ on Stack Overflow

Jquery appended input button doesn't function with .on(click)

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related