0

私のコードの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',
            });
        }
    }); 
});
4

2 に答える 2

2

on（）の委任メソッドを使用する必要があります-

$('body').on('click', 'input.tr_clone_add', function(){...
于 2013-01-31T23:14:42.703 に答える
1

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/

于 2013-01-31T23:42:30.003 に答える