Question

情况是在我点击将显示模态的按钮后，它将运行一个内部有2个jquery的点击事件：

.html 到 modal-body 类
（'show.bs.modal'）包含 .append 到 modal-body 类

HTML（按钮）

     <button class="btn btn-default view_detail" data-toggle = "modal" data-target="#transactionDetailModal">Detail</button>

相同的HTML（模态）

     <!-- Modal -->
     <div class="modal fade" id="transactionDetailModal" role="dialog">
         <div class="modal-dialog modal-lg">

              <!-- Modal content-->
              <div class="modal-content">
                  <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Selling Report</h4>
                  </div>
                  <div class="modal-body">

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

         </div>
     </div>

JS

     $(document).ready(function(){
         $('.view_detail').on('click',function(event){

             $('.modal-body').html('<p>.html element</p>');

             $('#transactionDetailModal').on('show.bs.modal', function (event) {
                 $('.modal-body').append('<p>.append element</p>');
             });
         });

     });

如果我单击按钮一次，它似乎工作正常（这是我想要的结果）：

首先点击

但是在第一次点击之后，附加的元素一直出现，尽管我认为它会被.html覆盖

第二次点击

它不断增加

第三次点击

我想要的是每次点击模态按钮时都会覆盖 .append （就像第一次点击图片一样）。如果我把 .append 放在（'show.bs.modal'）之外，它会运行正常，而不是每次点击按钮都反复显示以前添加的元素

JS

     $(document).ready(function(){
         $('.view_detail').on('click',function(event){

             $('.modal-body').html('<p>.html element</p>');

             //I moved this one out from show bs modal below
             $('.modal-body').append('<p>.append element</p>');

             $('#transactionDetailModal').on('show.bs.modal', function (event) {

             });
         });

     });

上面的JS代码修复了出现附加元素的问题。

但为什么会这样呢？我确信每次单击它将运行.html的按钮时，附加的元素都会被覆盖，这意味着 modal-body 类中的所有元素都将被覆盖。

Answer 1

每次显示模态时都会触发

（'show.bs.modal'）事件。您每次显示模态并且html函数单独写入代码时，您之前编写的函数（如下所示）将单独执行。

  $('#transactionDetailModal').on('show.bs.modal', function (event) {
        $('.modal-body').append('<p>.append element</p>');
  });

此功能将单独触发，而不是单击（'.view_detail'）按钮。

可以删除（'show.bs.modal'）事件。

$(document).ready(function(){
     $('.view_detail').on('click',function(event){

         $('.modal-body').html('<p>.html element</p>');

         $('.modal-body').append('<p>.append element</p>');

       });
     });
 });

或者您可以在单个函数中触发，如下所示：

$(document).ready(function(){

     $('#transactionDetailModal').on('show.bs.modal', function (event) {

         $('.modal-body').html('<p>.html element</p>');

         $('.modal-body').append('<p>.append element</p>');
     });

 });

使用任何一项功能来解决问题。

Answer 2

你能做的是：

TYPE=Link

检查元素是否存在，然后如果它不存在，则追加它。

顺便说一句，你在哪里点击？如果您点击详细信息按钮，那么附加发生累积的原因是因为您只是附加到之前的标记，已经附加了一个

 $('#transactionDetailModal').on('show.bs.modal', function (event) {
    $('#transactionDetailModal p').length ? $('.modal-body').append('<p>.append element</p>') : return;
  });

标记。

更完整的解决方案是使用Bootstrap自己的功能，并在模态关闭后销毁它：

show.bs.modal中的附加元素未在Bootstrap Modal中被.html覆盖

2 个答案: