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 显式回显，如下图所示。

克隆代码是这样的（我想这很 hacky，不过我不知道有更好的替代方法）：

$('#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的第一个解决方案（谢谢）产生 a SyntaxError: invalid property id，可能是因为{% for item in equipment %}现在被视为 JavaScript 而不是字符串。

第二个解决方案，当这样做时：

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

结果是TypeError: clone.parentNode is null

可能需要提一下（抱歉，我忘了）：jQuery 代码在一个单独的 .js 文件中

编辑 2

我犯了一个错误：我试图将它附加到克隆节点的父节点，这显然是假的。现在，我已经这么远了：

基于 yergo 的第二个解决方案，我在 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 回答
0

尝试修复这部分：

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

只要这部分代码是在服务器端生成并通过 Volt 引擎解析的，Volt 控制语法就应该受到威胁，因为它不会出现在结果输出中。所以推杆'{% for item in equipment %}'+很麻烦。

此外，您可以使用 JS 克隆整个 DOM 节点。在此页面上尝试此代码：

var node = $('img[src="http://i.stack.imgur.com/35SUS.png"]')[0];
var nodeClone = node.cloneNode(true); // <- change here to 'true' for deep clone
node.parentNode.insertBefore(nodeClone, node);

您可以将整体保留<tr>在隐藏元素中，并使用简单的 JS 将其克隆为新行。

编辑：关于克隆：

提示：如果要克隆所有后代（子代），请将 deep 参数值设置为 true，否则设置为 false。

于 2016-03-23T08:59:04.807 回答