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

Posted 2023-05-08

【中文标题】使用 jQuery 动态添加 Prev Next 作为 Bootstrap Modal 按钮

【英文标题】：Using jQuery to dynamically add Prev Next as Bootstrap Modal buttons

【发布时间】：2018-08-28 23:31:18

【问题描述】：

我似乎在使用 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 个模态页脚是正确的。没有丢失的按钮。

【参考方案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 移动该节点到新位置。

当你使用纯文本时，它每次都会为你创建一个新节点，所以不会移动它。

【讨论】：

很好的答案。当我从try.jquery.com/levels/3/sections/4 的工作幻灯片中获取信息时，可能会节省我以后遇到重复此错误的机会。这告诉我把它放在 $() 包装器中。

公平地说，该幻灯片是正确的，但仅在非常有限的情况下使用 - 即添加一个<p>。在这些幻灯片中没有走得太远，因为它们很难阅读，但下一张说 price.appendTo($('.vacation')); 这也令人困惑，因为它可能只是 price.appendTo('.vacation');

您也可以在 for 循环 inside 中声明 var prevButton，这样每次都会使用不同的按钮。

【参考方案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); 
    
  
);

【讨论】：

meta.***.com/questions/300837/…