Question

js我的代码：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/

Jquery附加输入按钮不起作用.on（单击）

2 个答案: