Question

现在，我有一个触发onclick的javascript函数。但是，我希望在加载DOM时触发相同的功能。但是，以下代码有效，我不想放置脚本＆＃39;标签在视图中间。这里不能选择从body标签调用函数。

<script>document.addEventListener("DOMContentLoaded",function(){extractions.RefreshCheck(@check.ID)});</script>

我要实现此目的的代码段：

@foreach (var check in Model.FailedChecks)
{
   <li class="@( check.IsOK ? Html.Raw("bg-success") : Html.Raw("bg-danger") ) " cid="@check.ID">
    @Html.ActionLink(check.Display, "XList", "XList", new { filter = check.GetQuery(), Layout = check.Layout }, new { target = "_blank" }); 
    <span class="glyphicon glyphicon-refresh" onclick="extractions.RefreshCheck(@check.ID);" onload="initAutoRefresh"></span>

    @*<script>document.addEventListener("DOMContentLoaded",function(){extractions.RefreshCheck(@check.ID)});</script>*@
  </li>
}

以上代码有效，但我不希望在我的视图中使用该脚本标记。所以我尝试使用＆＃39; onload＆＃39;在我的javascript文件中添加以下代码eventlistner，它不起作用。我认为这是问题所在。

@foreach (var check in Model.FailedChecks)
{
   <li class="@( check.IsOK ? Html.Raw("bg-success") : Html.Raw("bg-danger") ) " cid="@check.ID">
    @Html.ActionLink(check.Display, "XList", "XList", new { filter = check.GetQuery(), Layout = check.Layout }, new { target = "_blank" }); 
    <span class="glyphicon glyphicon-refresh" onclick="extractions.RefreshCheck(@check.ID);" onload="extractions.InitAutoRefresh()"></span>

  </li>
}

我的InitAutoRefresh功能：

var extractions= {
    InitAutoRefresh: function () {
    if (document.readyState === 'complete') {
        RefreshCheck();
        console.log("function already loaded in DOM")
    } else {
        document.addEventListener('DOMContentLoaded', function () {
            RefreshCheck();
            console.log("function loaded in dom");
        });
    }

  },
RefreshCheck: function(intCheckId){
    $('li[cid=' + intCheckId + ']').addClass('bold');
    $.get(window.location + '/Home/UpdateIntegritycheck?checkId=' + intCheckId, function(data){
        $('li[cid='+intCheckId+']').replaceWith(data);
    });
  }
}

函数RefreshCheck在点击时工作正常（即它更新记录）。我很乐意收到您的反馈意见。谢谢。

Answer 1

试试这段代码：

@section scripts{
    <script>document.addEventListener("DOMContentLoaded", function () { xtractions.RefreshCheck(id) });</script>
}

Answer 2

如果您使用的是jquery，那么您可以使用

$(document).ready(function () { 
  your code here
});

Answer 3

一种方法是在html标签上定义自定义属性，您可以根据标签值触发条件。示例：

 <span data-click-on-dom-ready="true" onclick="extractions.RefreshCheck(@check.ID);" ></span>

然后远离您的局部视图，您可以输入以下内容：

$(document).ready(function () { 
  $("[data-click-on-dom-ready='true']").trigger('click');
});

在页面加载时执行javascript函数

3 个答案: