我正在使用 Jquery 克隆()一个 div 并更改其子级的 id,其中一个子级是Bootstrap标签输入.
你可以找到一个演示在这里.
点击后添加新运行添加了新的 div,但标签输入不可编辑!
这是我的代码(您可以查看完整代码here
):
$('#addrun').click(function () {
var s = $('#run1')
.clone()
.attr('id', '#run' + (++runNum))
.wrap('<div>');
s.find('#tag1').attr('id', 'tag2');
$('#tag2').tagsinput();
$('#addrun').before(s.parent().html());
$(".well").on('click', '.expandbtn', function () {
var $this = $(this).parent();
var $collapse = $this.closest('.RunWell').find('.SystemFiles');
$collapse.collapse('toggle');
});
$('.SystemFiles').collapse('collapse');
});
尝试打电话.tagsinput()
on #tag2
将其添加到页面后。
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();
Edit:
这可能是由于 TagsInput 插件如何初始化自身造成的。我要做的就是创建一个空运行容器的模板,并将其隐藏在页面上或通过 JavaScript 加载它。
<div class="control-group hide" id="ControlGroupTemplate">
<label class="control-label" for="textarea">Tools :</label>
<input type="text" class="tags" id="tag1" value="Amsterdam,Washington,Sydney,Beijing"
data-role="tagsinput" />
<br />
<div class="SystemFiles" data-role="collapsible">
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP Customer DLIS files (PUC)</label>
<div class="controls">
<input id="filebutton" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP logup DLIS files (LUP)</label>
<div class="controls">
<input id="file1" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP Producer DLIS files (PUP)</label>
<div class="controls">
<input id="file2" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP well folder</label>
<div class="controls">
<input id="file3" name="filebutton" class="input-file" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="filebutton">Prints</label>
<div class="controls">
<input id="file4" name="filebutton" class="input-file" type="file">
</div>
</div>
</div>
<button class="btn btn-mini link-btn expandbtn" id="exp" type="button">expand toggle</button>
<button class="btn btn-mini btn-primary"><span class="glyphicon glyphicon-arrow-down">
</span>Duplicate</button>
</div>
然后你克隆ControlGroupTemplate
并应用TagsInput
的方法。
var s = $('#ControlGroupTemplate')
.clone()
.attr('id', '#run' + (++runNum))
.wrap('<div>');
s.find('#tag1').attr('id', 'tag2');
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();
我什至会使用此方法将您的初始运行添加到您的页面中document.ready()
处理程序。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)