Bootstrap scrollspy在Blazor中不起作用

Question

我正在Blazor项目中工作，我想添加Bootstrap的scrollspy。

我在_Host.cshtml文件中有这个：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

我有这个页面：

<div class="mt-5 ml-3 mr-1">
<div>
<h3 class="d-inline">name</h3><h3 class="d-inline">></h3> <h3 class="d-inline">Change profile</h3>
</div>
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Credentials</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Office</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Home</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" style="position:relative;height: 200px;overflow-y: scroll;">
<h4 id="list-item-1">Credentials</h4>
<p>...</p>
<h4 id="list-item-2">Office</h4>
<p>...</p>
<h4 id="list-item-3">Home</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
</div>
</div>
</div>

当我将此粘贴到JSFiddle中时，它正在工作：https://jsfiddle.net/6p4r8obj/

当我将此粘贴到BlazorFiddle中时，它不起作用：https://blazorfiddle.com/s/li502n7x

当我在localhost上的项目中尝试它时，当我点击"清除缓存并强制重载"时，它有时会起作用，第二次点击"清除高速缓存并强制重新加载"时，就不再起作用了。

我能/需要做一些额外的步骤来让它在Blazor工作吗？

Answer 1

您的问题是脚本在创建页面之前尝试执行，请参阅：this SO.

由于执行的javascript是

$(window).on(EVENT_LOAD_DATA_API$2, function () {
var scrollSpys = [].slice.call(document.querySelectorAll(SELECTOR_DATA_SPY));
var scrollSpysLength = scrollSpys.length;
for (var i = scrollSpysLength; i--;) {
var $spy = $(scrollSpys[i]);
ScrollSpy._jQueryInterface.call($spy, $spy.data());
}
});

你可以试着(我不知道是否有效(写你的.js

更新感谢Kim Went，将ScrollSpy._jQueryInterface.call($spy, $spy.data());替换为$.fn['scrollspy'].call($spy, $spy.data());

checkScrollSpy=function(){
var scrollSpys = [].slice.call(document.querySelectorAll(SELECTOR_DATA_SPY));
var scrollSpysLength = scrollSpys.length;
for (var i = scrollSpysLength; i--;) {
var $spy = $(scrollSpys[i]);
$.fn['scrollspy'].call($spy, $spy.data());
}
}

并在OnAfterRenderAsync中调用此函数