在 jquery table.load() html 元素变得未定义之后

Posted 2023-03-05

【中文标题】在 jquery table.load() html 元素变得未定义之后

【英文标题】：after jquery table.load() html element becomes undefined

【发布时间】：2017-08-13 23:44:33

【问题描述】：

我正在重写帖子以使其更清晰

我有一个 HomeController 具有以下操作

public ActionResult About()
    
        MapDetailsRepository repMapDetail = new MapDetailsRepository("name=ge");
        YearRepository repYear = new YearRepository("name=ge");


        SuperMapModel smM = new SuperMapModel();
        smM.saVM = new StudentAssessmentViewModel();

        MapDetailResultSet mapDetailResultSet = repMapDetail.GetMapDetails(53);

        smM.saVM.mapDetails = mapDetailResultSet.mapDetails.ToList();
        smM.saVM.results = mapDetailResultSet.results.ToList();
        smM.saVM.students = mapDetailResultSet.students.ToList();

        smM.scM = new SearchControlViewModel();
        smM.scM.YearList = new SelectList(repYear.GetAll(), "yearID", "year");


        return View(smM);        

public ActionResult DisplaySearchResults(string searchText) 
         MapDetailsRepository repMapDetail = new MapDetailsRepository("name=ge");
         SuperMapModel smM = new SuperMapModel();
        smM.saVM = new StudentAssessmentViewModel();

        MapDetailResultSet mapDetailResultSet = repMapDetail.GetMapDetails(22);

        smM.saVM.mapDetails = mapDetailResultSet.mapDetails.ToList();
        smM.saVM.results = mapDetailResultSet.results.ToList();
        smM.saVM.students = mapDetailResultSet.students.ToList();

        return PartialView("~/Views/Maps/_MapDetailsList.cshtml", smM.saVM);

SuperMapModel 是一个具有 2 个视图模型的超类 - 用于搜索面板部分控制的 scM - 用于 MapDetailList 部分控制的 saVM

在页面加载时，SuperMapModel 被传递给 View，View 将各自的模型传递给每个部分控件

<div>
@Html.Partial("_SearchPanel", Model.scM)
</div>
<div class="row">
<div class="col-md-12 table-responsive" >
        @Html.Partial("~/Views/Maps/_MapDetailsList.cshtml", Model.saVM)

</div>

我的 MapDetails 部分控件非常复杂，所以我给出一个精简版

<table>
    <thead>
        <tr><th/><th/><th/></tr>
        <tr><th/><th/><th/></tr>
    </thead>
    <tbody>
      @foreach(ShortStudent geStudent in Model.students)
       
        <tr>
           <td>@geStudent.firstname</td>
           foreach (run it x number of times)
            
               <td>
                   @foreach (ShortResult geResult in Model.results)
                   
                   if (geResult.ResultValue != null)
                                

                                    <script> setResultValue(@colIndex, @rowIndex, '@geResult.ResultValue'); </script>
                                
                      
               </td>
           
       </tr>
      
    </tbody>
</table>

这个setResultValue函数定义在主视图（About）上，它设置当前td的innerhtml

function setResultValue(colIndex, rowIndex, resultValue) 
    alert("inside about");
    var cell = $("#MapDetails").children().children()[rowIndex].children[colIndex];
    cell.innerHTML = resultValue;

附：此网格在 document.ready 上转换为剑道网格

现在它在页面加载时完美运行，但是当我从搜索面板内部单击搜索按钮时，我执行以下操作（在搜索面板部分控件上定义）

function refreshGrid() 
    alert("search panel");
    var url = '@Url.Action("DisplaySearchResults", "Home")';
    $("#MapDetails").load(url,  searchText: "Lee" , function () 
        alert("success");
    );

附：这里的回调永远不会被触发

所以现在我只将部分视图与 DisplaySearchResults

中的新数据绑定

现在显然它在主页上找不到脚本函数 setResultValue 所以我在部分视图 mapdetailslist 上复制了相同的脚本函数 setResultValue（这当然是一个不好的做法）

更新

调试后我得到了更多细节，所以现在更新的问题是页面加载我可以得到 $("#MapDetails").children().children()[rowIndex] 但是在按钮单击后相同的是未定义

【问题讨论】：

你是什么意思某事正在崩溃？怎么了？您在浏览器控制台中遇到什么错误？

点击按钮没有任何反应

在浏览器中调试您的代码。你的脚本甚至被击中了吗？ （并摆脱按钮中可怕的onclick 并给它一个ID，以便您可以根据链接的答案使用$('#yourButtonID').click(function() ...。

现在尝试.....

如果您有一个在页面加载时执行某些操作的脚本，那么您需要在成功回调中再次运行该脚本。您还需要销毁现有的kendoGrid 并在成功回调中重新附加它 - $("#MapDetails").load(url, searchText : "Sophie", function() // call your scripts here );

【参考方案1】：

所以问题是我无法使用以下代码获取 td 元素

$("#MapDetails").children().children()[rowIndex]

我已经用一种非常老套的方式解决了它，但希望有一个更简洁的解决方案

function setResultValue(colIndex, rowIndex, resultValue) 

if ($("#MapDetails").children().children()[rowIndex] != undefined) 
    var cell = $("#MapDetails").children().children()[rowIndex].children[colIndex];
    cell.innerHTML = resultValue;

else 
    var newRow = 0, newCol = 0, assessmentLength = 5, elementPos = 0;
    newRow = rowIndex - 3;
    newCol = colIndex - 4;

    elementPos = (newRow * assessmentLength) + newCol;
    $(".test").get(elementPos).innerHTML = resultValue;

.test 是我的 td 的类，你可以在标记中看到

关于局部视图渲染仍然存在时加载脚本元素和dom元素的顺序的问题