动态引导模式 jQuery 在 Internet Explorer (IE) 中的第一次调用时不起作用答案

【问题标题】：Dynamic Bootstrap modal jQuery not working on first call in Internet Explorer (IE)动态引导模式 jQuery 在 Internet Explorer (IE) 中的第一次调用时不起作用
【发布时间】：2014-12-23 07:45:41
【问题描述】：

我在我的 Bootstrap 模式中使用 jQuery 时遇到问题。也就是说，模态文本区域的自动调整大小等各种插件仅在模态打开两次后才在 IE 中工作（至少是 IE 8 和 9）。例如，如果我在页面加载后打开模式，则自动调整大小插件不起作用，但是如果我关闭该模式窗口并重新打开它，那么它就可以正常工作。

模态标记：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!--- Content dynamically generated --->
    </div>
  </div>
</div>

模态打开方式：

<a data-toggle="modal" href="Test_Form.cfm" data-target="#myModal" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus"></span>Test</a>

调用下面的jQuery：

$("a[data-target=#addReferralModal]").click(function(e){
    e.preventDefault();

    var target = $(this).attr("href");

    //Load the url and show modal on success
    $("#myModal .modal-content").load(target, function(){ 

      //Set the textarea hight and focus etc. once myModal has been displayed   
      $('#myModal').on('shown.bs.modal', function(){    
        //Apply form validation
        $('form').bootstrapValidator();

        //Adjust the textarea's number of rows
        $('textarea').autosize();

        //Don't allow direct user input in readonly fields
        $('.readonly').focus(function(){
          this.blur();
        });

        //Add a datepicker widget for selecting dates
        $('.datepicker').datepicker({
          //Date format - e.g. 01-Jan-1900
          dateFormat: "dd-M-yy",
          //When a date is selected revalidate the date field
          onSelect: function(){
            $('#' + $(this).closest('form').attr('id')).bootstrapValidator('revalidateField', $(this).attr('id'));
          }
        });
      });

      $("#myModal").modal("show"); 
    });
  });

如您所见，我正在尝试添加 bootstrapValidator、autosize 和 datepicker 以供表单在结果模态中使用，但它们都没有在第一次工作。

相关的 JavaScript 和 CSS 包含在 .cfm 主页面中，该页面包含上述所有 HTML 和 jQuery 等。

这一切在 Chrome 和 Firefox 中都可以正常工作，所以我不太确定可能是什么问题。如果我在主 .cfm 页面中包含所有模态标记并且不使用 jQuery 调用打开它，它在 IE 中也可以正常工作，但是出于几个原因，我真的不想以这种方式设置它比如页面速度。

【问题讨论】：

我发现问题似乎是因为 $('#myModal').on('shown.bs.modal', function(){...});当您第一次在 IE 中打开模式时，不会调用上述 jquery 的一部分。有谁知道为什么？

标签： jquery twitter-bootstrap internet-explorer-8 internet-explorer-9 bootstrap-modal

【解决方案1】：

由于某种原因，模态的内容被加载了两次，我假设这是问题的根源。我最终根据上一个问题Bootstrap 3 with remote Modal 修改了处理模态的方式

【讨论】：