Question

我在javascript中遇到一个问题，我不太了解/了解我的想法：

我已经设置了一个html页面，其中还包含几个空的“容器”div。

在某些按钮点击时，我隐藏主要内容并使用容器div中的ajax调用加载部分视图。

例如：

$.ajax({
        url: url,
        type: "GET",
        data: data,
        success: function (response){
             $('#container1').html(response);
             $('#container1').show();
        }
    });

并在点击按钮时也关闭。例如：

$('#buttonClose').click(function (){
     $('#container1').hide();
     $('#container1').empty();
});

一切都运行良好但最近我开始清理代码，因为我将所有主要功能移动到一个单独的脚本文件中，只是为了方便阅读而只保留视图脚本中的实际jquery事件处理程序。 / p>

我已将主视图中的所有函数以及所有部分函数放入单个js文件中，该文件包含在主视图的顶部，还有一组更通用的函数，这些函数在不同视图中用于调用的js文件中“... system-functions.js”包含在_Layout中。

我遇到的问题是，第一次调用局部视图时，它会正确调用主js文件中的正确函数，并使用system-functions.js加载所有内容，但是当它关闭时我试图再次重新打开它，它不再能够从系统函数中调用任何东西，因此即使已经加载了部分（从各种html元素中看到，例如正在显示的标题等）但是无法加载我在网格中调用了system-functions.js

中的“InitGrid（）”函数

我通过在部分本身AS WELL中包含system-functions.js文件来“修复”这个问题。这意味着我将在加载主视图时加载此脚本文件一次，但每次打开局部视图时都会再次加载。

这让我感到困惑的原因是我的很多部分视图都涉及一些bootstrap javascript函数以及jquery函数，而且我只在布局中包含了bootstrap.js和jquery.js文件，并且不需要在部分中调用它，但这似乎不是这个system-functions.js文件的情况。如果有人可以为我澄清这一点或指出我对此的解释，那将非常有帮助。

感谢，

布局：

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-1.11.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/system-functions.js"></script>
    ...
</head>
</html>

指数：

<button id="btn1">Open</button>
<button id="btn2">Close</button>
<div id="main">
   ...MAIN VIEW CONTENT...
</div>
<div id="container1"></div>

<script src="~/Scripts/ViewFunctions/Index.js"></script>
<script type="text/javascript">
     $('#btn1').click(function () {
        OpenPartial();
     });

     $('#btn2').click(function () {
        ClosePartial();
     });
</script>

Partial1：

<h1>PARTIAL 1</h1>
<span data-toggle="tooltip" title="Tool Tip"></span>
<div>
   <table id="table1"></table>
</div>
<script type="text/javascript">
   $(document).ready(function(){
      var data = @Html.Raw(Json.Encode(Model));
      LoadGrid("Partial1", data);

      $('span').tooltip();
   });
</script>

ViewFunctions / Index.js：

function OpenPartial(){
     $.ajax({
            url: url,
            type: "GET",
            data: data,
            success: function (response){
                 $('#container1').html(response);
                 $('#container1').show();
            }
        });
}

function ClosePartial(){
         $('#container1').hide();
         $('#container1').empty();
}

function LoadGrid(id, data){
        InitGrid(id, data);
}

的系统functions.js：

function InitGrid(id, data){
    ....Initialize grid function
}

使用部分视图加载脚本的一般过程

0 个答案: