3

グループ入力のリストを作成して、ユーザーがグループ行を動的に追加/削除できるようにします。

<div id="div-form-denominations" class="form-denominations">
    <div id="row-0" class="form-denomination">
        <div class="form-field">
        <div class="form-field">
        <div class="form-field">
        <input id="_denominations[0].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[0].id.reference" value="87-070329-034COP-4444">
        <input id="_denominations[0].denomination" class="removableHiddenDenom" type="hidden" name="denominations[0].denomination" value="10000">
        <a id="deleteBtn-[0]" class="action-link delete-denomination" href="#">
        <div class="spacer"></div>
    </div>
    <div id="row-1" class="form-denomination">
        <div class="form-field">
        <div class="form-field">
        <div class="form-field">
        <input id="_denominations[1].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[1].id.reference" value="87-070329-034COP-4444">
        <input id="_denominations[1].denomination" class="removableHiddenDenom" type="hidden" name="denominations[1].denomination" value="">
        <a id="deleteBtn-[1]" class="action-link delete-denomination" href="#">
        <div class="spacer"></div>
    </div>
    <div id="row-2" class="form-denomination">
        <div class="form-field">
        <div class="form-field">
        <div class="form-field">
        <input id="_denominations[2].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[2].id.reference" value="">
        <input id="_denominations[2].denomination" class="removableHiddenDenom" type="hidden" name="denominations[2].denomination" value="">
        <a id="deleteBtn-[2]" class="action-link delete-denomination" href="#">
    <div class="spacer"></div>
    </div>
    <div id="row-3" class="form-denomination">
        .......
    </div>

したがって、各行には、入力または選択コンポーネント（上記のコードには表示されていません）といくつかの非表示フィールド、および現在の行をビューから削除するための削除リンクを含むフォームフィールドのグループが含まれます。

また、セクションに新しい行を動的に追加するためのリンクを作成します

var rowTemplate = null;
j(document).ready(function() {
    // Save the row template
    rowTemplate = j('.form-denomination:first-child').clone();

    j("#add_link").click(function() {
            add_denomination();
    });
});

add_denominationこれは、最初の行を複製し、複製されたIDを新しいインデックスに置き換え、複製された行をリストの最後の行の後に追加する関数の内容です。

function add_denomination() {
    var index = j('.form-denomination').length; 
    // set the new row id
    var newRowId = 'row-' + index;
    var newRow = rowTemplate.clone().attr('id', newRowId);

    // Replace the id/name attribute of each input control
    newRow.find('div, input, select, a').each(function() {
        replaceAttribute(j(this), 'id', index);
        replaceAttribute(j(this), 'name', index);
        j(this).val('');
    });

    // add new element to the DOM
    newRow.appendTo('.form-denominations');
    alert("new list size = " + j(".delete-denomination").length);
    console.log("DONE!");
}

ポップアップアラートをクリックするたびにadd-link、新しいリストサイズ（j（ "。delete-denomination"）。lengthが1ずつ増加します）が表示されます。これは、私の理解では、新しい行が正常に追加されました。

問題は次の方法です

// delete denomination row
j('.delete-denomination').click(function () {
    j(this).parent().remove();
}

クローンされていない行でのみ機能します!!! firebugを使用すると、追加された行に元の行と同じ構造と同じ要素が正常に追加されていることがはっきりとわかりますが、違いはIDだけです。

deleteBtn-[i]ただし、 iがcloned/appended行のインデックスであるをクリックするたびに、コードがj('.delete-denomination').click()関数に入らないこともあります。これは、私の理解では、Domまたはjqueryが新しい行を認識しなかったため、jQueryによるリンクの識別に失敗しました。 。これは、リストのサイズが大きくなったことを示す以前のアラートメッセージとは矛盾しています。

しかし、私deleteBtn-[i]が行である場所をクリックするとnon-cloned、すべてが正常に機能します...

したがって、問題は、新しいdomを追加/追加し、jQueryまたはDomで識別させる方法です。上記の処理の何が問題になっていますか？Dom / jQueryが追加された行をすべての観点から理解できるように、リストを更新する方法はありますか？

4

3 に答える 3

3

jQuery 1.7+

j(".form-denomination").on("click", ".delete-denomination", function(){
    j(this).parent().remove(); 
});

jQuery 1.3+

j(".delete-denomination").live("click", function(){ 
    j(this).parent().remove(); 
 });

jQuery 1.4.3+

j(".form-denomination").delegate(".delete-denomination", "click", function(){ 
   j(this).parent().remove(); 
});
于 2013-03-22T02:55:41.690 に答える
1

問題は順序の問題であり、式がいつ評価されるかです。セレクターを使用して jQuery を呼び出すと、その時点でセレクターが評価され、その時点で存在する一致する要素が選択されます。その後、クリック ハンドラーはそれらの要素のみに登録されます。後で作成される要素は、当然、影響を受けません。

別の例で示されている 1 つのソリューションでは、jQuery の「ライブ イベント」を使用して、各イベントが発生するときにセレクターを適用し、一致する要素がある場合はそれを決定します。このアプローチには、パフォーマンスへの影響があります。

もう 1 つの解決策は、新しく作成された要素を作成するときに、必要なイベント ハンドラーを登録することです。

于 2013-03-22T03:17:39.687 に答える