2

ユーザーが「製品の追加」をクリックしたときに、その行を複製して前の行の下に貼り付けるテーブル/tbody/行があります。つまり、ユーザーは仕訳項目を追加しています。

私が望むのは、最初に「製品の追加」ボタンをクリックしたときに、行を複製して下に挿入することです。次に、最初の「製品の追加」ボタンを無効にしたいのですが、さらに別のエントリを挿入できるようにするには、次のボタンを有効にする必要があります。

これまでのところ、下の行を複製して挿入するボタンを取得し、最初のボタンを無効にすることができます。ただし、2 番目のボタンは無効になっていませんが、機能を起動しなくなりました。それは単なる「空」ボタンです。

<table id="sales-journal">
    <tbody>
        <tr class="sales-journal-row">
            <td class="grid-40">
                <select id="sales-product-id" name="sales-product-id" required="required">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-sold-qty" name="sales-sold-qty" />
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-spill-qty" name="sales-spill-qty" />
            </td>
            <td class="grid-20">
                <button class="sales-journal-add" id="sales-journal-add" />Add Product</button>
            </td>
        </tr>
    </tbody>
</table>

そして、jquery

$('.sales-journal-add').click(function() {
    var clone = $('#sales-journal > tbody:last').clone()
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).removeAttr('id').attr('disabled', 'disabled').addClass('disabled');
});
4

2 に答える 2

4

新しいボタンにはイベント委任を使用する必要があります。クリック イベントは、最初は DOM に存在するボタンにのみバインドされますが、複製されたボタンにはバインドされません。SO は、ボタンへの委譲のためにイベントをコンテナーにバインドし、新しい tbody を複製するときに将来作成されるボタンに適用されるようにします。

$('#sales-journal').on('click', '.sales-journal-add' , function() {
    var clone = $('#sales-journal > tbody:last').clone()
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).removeAttr('id').prop('disabled', true).addClass('disabled');
});

.on()を jquery >=1.7 に使用するか、古いバージョン (非推奨) に live を使用できます。

また、私の提案として、無効なプロパティを設定する代わりにpropを使用してみてください。attr

フィドル

于 2013-06-19T15:06:03.760 に答える
0

ここで、これを試してください：

<table id="sales-journal">
    <tbody>
        <tr class="sales-journal-row">
            <td class="grid-40">
                <select id="sales-product-id" name="sales-product-id" required="required">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-sold-qty" name="sales-sold-qty" />
            </td>
            <td class="grid-20">
                <input type="number" step="1" id="sales-spill-qty" name="sales-spill-qty" />
            </td>
            <td class="grid-20">
                <button class="sales-journal-add" id="1" />Add Product</button>
            </td>
        </tr>
    </tbody>
</table>

JS:

var cur_id = $(".sales-journal-add").attr('id');
var next_id = parseInt(cur_id) + 1;

$('#sales-journal').on('click',"#" +cur_id,function() {
    var clone = $('#sales-journal > tbody:last').clone();
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).attr('disabled', 'disabled').addClass('disabled');
    clone.find('.sales-journal-add:last').attr('id', next_id);
    cur_id = next_id;
});


$('#sales-journal').on('click',"#" +next_id,function() {
    var clone = $('#sales-journal > tbody:last').clone();
    clone.insertAfter('#sales-journal > tbody:last');
    $(this).attr('disabled', 'disabled').addClass('disabled');

    clone.find('.sales-journal-add:last').attr('id', next_id);
});

フィドル。

于 2013-06-19T15:34:59.250 に答える