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

Question

我似乎在使用 jQuery 动态添加按钮并且这些按钮丢失时遇到了问题。我已验证这些按钮之前已添加到 DOM。

我有这个包含 4 个按钮的 codepen。每个按钮都会打开一个模式，如下图所示

我正在使用 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 开发工具在每个循环结束时设置断点运行跟踪，我看到按钮已创建。但是，在下一次迭代期间，添加的按钮将从 DOM 中消失。希望有人能阐明我做错了什么。

在 jQuery 完成 1 个循环之后，我的 HTML 中的第一个模态页脚。从 chrome 开发工具粘贴，这表明添加了 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>

在第二个循环之后。第一个模态页脚不再有 Next 按钮，但第二个模态页脚添加了 Prev 和 Next 按钮。 （第一个模式上的按钮是如何被删除的？）

<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>

在第三个循环之后。第二个模态页脚不再有 Prev 和 Next 按钮。第三个模态页脚添加了 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); 
    }
  }
});