我有一个(也许)非常独特的问题。您可以查看下面的图片以获得更好的理解。
选择区域中的设备零件在控制器中获取,然后用伏特循环遍历它们,并在<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的第一个解决方案(谢谢您)产生了一个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
我犯了一个错误:我试图将其附加到克隆节点的parentNode上,这显然是伪造的。现在,我到此为止:
基于yergo的第二个解决方案,我在JSFiddle中进行了一些try&error。现在,我的解决方案如下所示:
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>
而不是其中的内容。
经过大量的试验和错误,我来到了下面的工作代码。所有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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句