使用jQuery动态添加Prev Next作为Bootstrap Modal按钮

Question

我似乎遇到了使用jQuery动态添加按钮并且缺少这些按钮的问题。我已经确认这些按钮之前已添加到DOM中。

我有codepen，其中包含4个按钮。每个按钮打开一个模态，如下图所示

我使用jQuery为每个模态添加Prev和Next按钮，除了第一个模态只添加一个Next按钮，最后一个模态只添加一个Prev按钮。我正在使用jQuery来执行此任务。这是代码：

$(function() {

  var $modals = $('[data-toggle="modal"]');
  var mCount = $modals.length;
  var el = $('.modal-footer').children();

  var prevButton = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>");
 var nextButton = $('<button type="button" class="btn btn-default" data-dismiss="modal">Next</button>');


  for (var i = 0; i < mCount; i++) {
    if ( i === 0 ) {
      $(el[i]).after(nextButton);
    } else if ( i === mCount -1 ) {
      $(el[i]).before(prevButton);
    } else {
      $(el[i]).before(prevButton);
      $(el[i]).after(nextButton); 
    }
  }
});

我已经使用Chrome Dev Tools运行跟踪，在每个循环结束时设置断点，我看到按钮已创建。但是，在下一次迭代中，添加的按钮正在从DOM中消失。希望有人可以解释我做错了什么。

jQuery完成1循环后我的HTML中的第一个模态页脚。从chrome dev工具粘贴，这表明添加了Next按钮:(目前为止好）

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Next</button>
</div>

第二次循环后。第一个模态页脚不再有“下一步”按钮，但第二个模态页脚添加了“上一个”和“下一个”按钮。 （第一个模态的按钮是如何被删除的？）

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Prev</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Next</button>
</div>

第3次循环之后。第二个模态页脚不再有Prev和Next按钮。第3个模态页脚添加了Prev和Next按钮。

第4次循环后，第3个模态页脚的Prev按钮被删除（为什么？），第4个模态页脚是正确的。没有丢失按钮。

Answer 1

更改

var prevButton = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>");

到

var prevButton = "<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>";

（即删除$()包装器）

当您使用$("..")时，您创建了一个新节点，.after / .before 将该节点移动到新位置。

当您使用纯文本时，它每次都会为您创建一个新节点，因此无法移动它。

Answer 2

我已更新您的codepen。请点击此处。

https://codepen.io/smitraval27/pen/Ldxrey

// javascript object patterns
$(function() {

  var $modals = $('[data-toggle="modal"]');
  var mCount = $modals.length;
  var el = $('.modal-footer').children();

  var prevButton = "<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>";
 var nextButton = '<button type="button" class="btn btn-default" data-dismiss="modal">Next</button>';

  for (var i = 0; i < mCount; i++) {
    if ( i === 0 ) {
      $(el[i]).after(nextButton);
    } else if ( i === mCount -1 ) {
      $(el[i]).before(prevButton);
    } else {
      $(el[i]).before(prevButton);
      $(el[i]).after(nextButton); 
    }
  }
});