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

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 开发工具粘贴，这表明添加了“下一步”按钮：（到目前为止还不错）

<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); 
    }
  }
});

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

Using jQuery to dynamically add Prev Next as Bootstrap Modal buttons

jquery

modal-dialog

button

dynamically-generated

twitter-bootstrap