使用 jquery 连线时未加载 Bootstrap 模态

Question

我有以下 link 并且我试图在单击时加载 bootstrap 模态，但 javascript 功能似乎没有触发。不是在模式中加载视图，而是作为新页面加载？

<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 这将代表 event 然后在函数本身添加 e.preventDefault() 这将停止刷新效果。

Answer 2

在你的控制器方法上试试

 public ViewResult ReportSummary()
 {
     // some actions

     if(Request.IsAjaxRequest())
         return PartialView("ReportSummary", viewmodel);
     else
         return View("ReportSummary", viewmodel);

 }

在您看来

$('#exampleModal').on('show.bs.modal', function (event) {//give your model wrapper an id
  //do some ajax and get html
$.ajax({
    url:'',
    success:function(data){
        $('#report-summary-container').html(data);
    }
});

})

在您的锚标签上，添加 data-toggle="modal" data-target="#exampleModal"

如果您不想使用 bootstrap 事件触发您的模式

$('#myModal').modal('show')

使用 jquery 连线时未加载 Bootstrap 模态

Boostrap modal not loading when wired using jquery

javascript

asp.net-mvc

jquery

twitter-bootstrap

bootstrap-modal