使用jquery

Question

我有以下链接，我试图加载一个引导模式，当它点击但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')