从 DOM jQuery 添加输入后，Bootstrap 4 模态滚动不起作用答案

【问题标题】：Bootstrap 4 Modal scrolling not working after adding input from DOM jQuery从 DOM jQuery 添加输入后，Bootstrap 4 模态滚动不起作用
【发布时间】：2020-01-14 23:43:37
【问题描述】：

我正在使用 Bootstrap 4 Modal，并且我有一个类似这样的 UI。

如您所见，我有 Questions 标签和 Add Question 并且通过单击 Add Question 我可以通过 jQuery 添加新的输入框.这是我如何添加新问题的代码。

$(document.body).on("click",".addSingle",function(){

       var appendX = '<div class="actionBtn"><div class="BtnIcon removeBtn removeSingle" title="Delete this choice."><svg class="svd-svg-icon" style="width: 16px; height: 16px;"><use xlink:href="#icon-inplaceplus"><symbol viewBox="0 0 12 12" id="icon-inplaceplus"><path d="M11 5H7V1H5v4H1v2h4v4h2V7h4z"></path></symbol></use></svg></div></div>';


       $(this).closest(".question_editable").find(".question:first").clone().find("input:text").val("").end().insertAfter($(this).closest(".question_editable").find(".question:last")).append(appendX);





   });

现在的问题是，只要我添加更多问题，我就可以看到滚动，但我无法向下滚动。这是我添加更多问题时 UI 的外观。

正如您在上面看到的，我无法再看到 Add Question 文本，因为我的 Scroll 无法正常工作，但它的显示。

现在，当我单击 Edit Question 并重新打开 Edit Question 模态时，这是另一个具有相同模态代码的文件，只有模态 ID 不同，它的工作正常这个。

在编辑问题中，我可以添加问题，并且我的滚动条也可以正常工作。所以我虽然是我的 Add Question 模态有一些问题但是我的模态弹出窗口 Add Question 和 Edit Question 模态问题代码结构是相同的。

这是我的 Add Question 模态弹出窗口，代码看起来像。

<div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="questionModal"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modalcustom" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Add Question</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form role="form" method="POST" action="" novalidate id="questionModalfrm">
            @csrf
            <div class="modal-body">
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-br-success  btn-s-md  waves-effect waves-light">Add</button>
               <button type="button" class="btn btn-danger  btn-s-md  waves-effect waves-light" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

我通过添加.modal { overflow-y:auto; } 尝试了各种选项（Bootstrap Modal Issue - Scrolling Gets Disabled），但它对我不起作用。

这里是我的 编辑问题 HTML 标记的样子。

<div class="modal fade" id="questionModalEdit" tabindex="-1" role="dialog" aria-labelledby="questionModalEdit"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modalcustom" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Edit Question</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form role="form" method="POST" action="" novalidate id="questionModalEditfrm">
            @csrf
            <div class="modal-body">
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-br-success  btn-s-md  waves-effect waves-light">Save</button>
               <button type="button" class="btn btn-danger  btn-s-md  waves-effect waves-light" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

有人可以指导我如何解决这个问题吗？

【问题讨论】：

需要查看您的.question_editable 标记。
也许：{overflow-y: auto !important; }
@EternalHour 我已添加。
那个 html 不包含 .question_editable 类。
@EternalHour 是的，add 和 edit 问题页面的唯一代码相同。所以我不认为这是造成问题的原因，因此我没有在我的问题中提出。

标签： javascript jquery bootstrap-4 bootstrap-modal

【解决方案1】：

如果您可以在 jsfiddle 中复制类似的内容以供其他人检查导致问题的原因，那将会很有帮助。

您可以尝试的一个选项是仅将溢出到您的“问题”部分而不是您的模式，然后查看它是否按预期工作。

【讨论】：