Twitter bootstrap 输入标签不能与 Jquery before() 一起使用

Question

我正在使用 Jquery 来克隆（）一个 div 并更改其孩子的 id，其中一个孩子是 Bootstrap-tagsinput。

您可以找到Demo here。

点击add new run后添加了一个新的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');

            });

Answer 1

将.tagsinput() 添加到页面后，尝试在#tag2 上调用.tagsinput()。

$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();

编辑：

这可能是由于 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() 处理程序中的页面。