1

私は（おそらく）かなりユニークな問題を抱えています。理解を深めるために、下の図をご覧ください。

以下のコードのように、選択領域内の機器がコントローラーでフェッチされ、Volt でループし、<option>タグでエコーします。

<select class="form-control">
    <option value="0">No equipment</option>
    {% for item in equipment %}
    <option value="{{ item.id }}">{{ item.name }}</option>
    {% endfor %}
</select>

ユーザーはプラスボタンを押して、別の機器を追加できます。全体<tr>が複製され、jQuery を介して追加されます。問題は、機器の部分をループしたいときです。下の図に示すように、ボルト コードは解析されませんが、jQuery によって明示的にエコーされます。

クローン作成コードは次のとおりです (かなりハックですが、これに代わるより良い方法はわかりません)。

$('#addEquipment').bind('click', function() {
    var $div = $('tr[id^="rowEquipment"]:last');
    var num = parseInt($div.prop('id').match(/\d+/g), 10) + 1;
    var $clone = $div.clone().prop('id', 'rowEquipment' + num);
    var $equipment = '<td>'+
        '<div class="row">'+
            '<div class="col-sm-1">'+
                '<p class="form-control-static">Equipment:</p>'+
            '</div>'+
            '<div class="col-sm-3">'+
                '<select class="form-control">'+
                    '<option value="0">No equipment</option>'+
                    '{% for item in equipment %}'+
                    '<option value="{{ item.id }}">{{ item.name }}</option>'+
                    '{% endfor %}'+
                '</select>'+
            '</div>'+
            '<div class="col-sm-1">'+
                '<p class="form-control-static">Notes:</p>'+
            '</div>'+
            '<div class="col-sm-3">'+
                '<input type="text" class="form-control" placeholder="Thickness mm / Weight kg">'+
            '</div>'+
            '<div class="col-sm-4">'+
                '<button id="' + num + '" class="btn btn-default removeEquipment"><span class="glyphicon glyphicon-remove"></span></button>'+
            '</div>'+
        '</div>'+
    '</td>';
    $div.after($clone.html($equipment));
    $('.removeEquiment').bind('click', function(evt) {
        var $id = $(evt.target).prop('id');
        var $removeEquipment = $('tr[id^="rowEquipment' + $id + '"]');
        $removeEquipment.remove();
    });
});

そしてここに写真があります：

ここに画像の説明を入力

アドバイスありがとうございます！

編集：

yergo (ありがとう)からの最初の解決策はSyntaxError: invalid property id、おそらく{% for item in equipment %}文字列ではなく JavaScript として扱われるため、 を生成します。

2番目の解決策は、次のようにした場合です。

var div = $('tr[id="cloneEquipment"]')[0];
var clone = div.cloneNode();
clone.parentNode.insertBefore(clone, div);

結果はTypeError: clone.parentNode is null

言及することが重要かもしれません (申し訳ありませんが、忘れていました): jQuery コードは別の .js ファイルにあります

編集2

エラーが発生しました:クローン ノードのparentNodeに追加しようとしましたが、これは明らかに偽物です。今、私はここまでです：

yergo の 2 番目のソリューションに基づいて、JSFiddle で試行錯誤を行いました。現在、私のソリューションは次のようになっています。

var div = $('tr[id^="cloneEquipment"]');
var clone = div.clone();
clone.removeClass('hidden');
var cloneNode = clone[0].cloneNode();
div[0].parentNode.insertBefore(cloneNode, div[0]);

クローン作成プロセスは機能しているように見えますが<tr>、内容ではなく、 のみをクローンします。

4

2 に答える 2

0

多くの試行錯誤の後、次の作業コードにたどり着きました。すべてのclone.find()コマンドは無視できます。これは純粋な jQuery の問題であり、Volt や Phalcon とは何の関係もありませんでした。このように、ボルト コードは正しく解析されます。

$('#addEquipment').bind('click', function() {
    var div = $('tr[id^="rowEquipment"]:last');
    var num = parseInt(div.prop('id').match(/\d+/g), 10) + 1;
    var clone = div.clone();
    clone.prop('id', 'rowEquipment' + num);
    clone.find('.addEquipment').tooltip('disable');
    clone.find('.addEquipment').remove();
    clone.find('.helpEquipment').remove();
    clone.find('.removeEquipment').prop('id', num);
    clone.find('.removeEquipment').removeClass('hidden');
    $(div).after(clone);
    $('.removeEquipment').bind('click', function(evt) {
        var $id = $(evt.target).prop('id');
        var $removeEquipment = $('tr[id^="rowEquipment' + $id + '"]');
        $removeEquipment.remove();
    });
});

興味のある方のための JSFiddle は次のとおりです: clickerino

于 2016-03-23T16:46:51.443 に答える