Jquery附加的输入按钮不适用于.on（点击）

Question

我的代码的jsFiddle：http://jsfiddle.net/8Vcyu/

我设置了一个表单，用户可以在其中输入 1 到 10 行信息。如果用户添加第 10 行 jquery 删除“添加行”按钮。如果删除第 10 行，则添加按钮会返回。这一切都很好，但是当“添加行”按钮被添加回页面时，它不再起作用 - 没有添加新行。非常感谢任何帮助，这个问题让我很困惑。

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

你应该使用 on() 的委托方法 -

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

Answer 2

两件事：我创建了一个负责将按钮绑定到单击的函数，并将其添加到$(document).ready() 以及单击Remove 按钮时。

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()
            }
        }
    });
}

另外，我注意到当您重新添加按钮时，您的按钮的类名中缺少一个“d”：

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

这导致代码失败。

这是一个 JSFiddle：

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