コードビハインドからブートストラップポップアップを呼び出そうとしていました。これは私のhtmlです
<head runat="server">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="scripts/Jquery-2.1.4.js"></script>
<script src="scripts/bootstrap-min.js"></script>
<script>
function openModel() {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" OnClick="OnClick" Text="sd"/>
</div>
<div class="container">
<div id="popover-content" class="hide">
<div class="form-group">
<asp:Label runat="server" id="lblDescription"></asp:Label>
</div>
</div>
</div>
</form>
</body>
これがポップアップを呼び出すための私のコードです
protected void OnClick(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModel();", true);
}
しかし、ボタンをクリックしても何も起こりません。コンソールにもエラーは表示されません。私は何が間違っているのですか？
セレクターが正しいことを確認してください
現在、イベントのセレクターが何かをターゲットにしているようには見えません。セレクター$("[data-toggle=popover]")は、data-toggle属性が「popover」に設定されている要素をターゲットにしますが、マークアップにそれに一致するものはありません。
考えられる競合状態
このような問題は通常openModel()、他のコンテンツ（jQueryやBootstrapなど）の準備が整う前に関数が呼び出される原因となる競合状態の結果である可能性があります。
関数を使用してsetTimeout()関数を呼び出す明示的な遅延を追加することで、これを解決してみることができます。
ScriptManager.RegisterStartupScript(this, GetType(), "Pop", "setTimeout(function(){ openModel();},10);", true);
それでも問題が解決しない場合は、ブラウザ内で開発ツール（F12）を使用し、[コンソール]タブまたは[ネットワーク]タブにエラーがないことを確認することを検討してください。
参照が正しいことを確認します（そして適切な場所にあります）
jQueryまたはBootstrapライブラリが正しくロードされていないことに気付いた場合ResolveUrl()は、相対URLを渡すことができ、それに対応する絶対URLを返すメソッドを利用することを検討できます。
<script src="<%= ResolveUrl("~/scripts/Jquery-2.1.4.js") %>"></script>
<script src="<%= ResolveUrl("~/scripts/bootstrap-min.js") %>"></script>
これは、探しているファイルを確実に取得するのに役立つことがよくあります。
マークアップの<script>終了</body>要素の近くにタグを配置して、前のすべてのコンテンツが読み込まれるまでタグが呼び出されないようにすることも検討してください。
<!-- Form Contents -->
</form>
<script src="<%= ResolveUrl("~/scripts/Jquery-2.1.4.js") %>"></script>
<script src="<%= ResolveUrl("~/scripts/bootstrap-min.js") %>"></script>
</body>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加