javascript - 使用 jquery 连接时 Bootstrap 模式未加载

Question

我有以下链接，我试图在单击时加载 Bootstrap 模式，但 javascript 函数似乎没有触发。不是将 View 加载到模态框内，而是将其加载为新页面？

<a href="/Reports/ReportSummary" class="icon-before js-report-summary" data-icon="\uf080"> </a>

 @*this is the modal definition*@
 <div class="modal hide fade in" id="report-summary">
     <div id="report-summary-container"></div>
 </div>


<script >
 $('a.js-report-summary').click(function (e) {
   var url = $(this).attr('href'); // the url to the controller
   e.preventDefault();      
   $.get(url, function (data) {
      $('#report-summary-container').html(data);
      $('#report-summary').modal('show');
  });
});
</script>


 public ActionResult ReportSummary()
 {
     // some actions


     return PartialView("ReportSummary", viewmodel)

 }

 // Report summary view which contains modal

 <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">@ViewBag.FormName - Analysis</h4>
        </div>
        <div class="modal-body">

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

控制台中也没有显示任何错误，那么为什么 jquery 函数没有触发？

Answer 1

在您的点击函数中，添加参数e，这将代表事件然后在函数本身中添加 e.preventDefault() 这将停止刷新效果。