无法将 jQuery 嵌入到 @Html.ActionLink()

Question

@Html.ActionLink 标签有一个小问题。我想在单击它时更改背景。但是没用。

<ul>
    <li>@Html.ActionLink("View Profile", "Profile", "User", null, new { id = "profile" })</li>
</ul>

和jQuery代码：

$("#profile").click(function () {
    document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});

但是我已经在 w3schools 上试过了，它已经成功了：

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<a id="profile" href"">View profile</a>  

<script>
$("#profile").click(function() {
    document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});
</script>

</body>
</html>

你能帮帮我吗？

p/s: 这是我的子问题:

你能告诉我这两者有什么区别吗:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<a id="profile" href"">View profile</a>

<script>
$("#profile").click(function() {
    document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});
</script>

和

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$("#profile").click(function() {
    document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});
</script>

<a id="profile" href"">View profile</a>

如果我将第 <a id="profile" href"">View profile</a> 行的位置更改为末尾，代码将无法运行。

为什么？

Answer 1

每当脚本执行时，它都会查找 ID = "profile" 的 dom，并且由于它尚未加载到页面上，因此事件不会被绑定。

您可以通过将代码包装在文档就绪事件中来解决此问题：

$(document).ready(function(){
    //add event here
});

或 jquery shorthand 表示法：

$(function(){
    //add event here
});

一旦您的 html 已加载，此处的任何代码都会触发。

另一个解决方法是将事件放在文档本身上，并使用 'on' 方法指定您正在寻找 #profile:

$(document).on('click', '#profile', function(){
    //do stuff
});

Answer 2

我认为你的问题是因为脚本开始执行时 DOM 元素没有完全加载。如果像这样包装脚本，您可以解决问题：

$(document).ready(function(){
    $("#profile").click(function () {
        document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
    });
});

Answer 3

回答主要问题

这是因为您的代码是运行当您的页面元素未加载时。所以请将脚本放在底部或尝试以下脚本：

$(function () { //Since it's short and you are using jQuery. You may also use $(document).ready(function(){
    $("#profile").click(function () {
         document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
    });
});

虽然您可以使用上面的代码并且它有效，但我建议您始终将 <script> 标记放在页面底部以加快页面加载时间。

无论如何你可以做任何这些。

您的子问题的答案：

因为javascript(Jquery)搜索指定id的dom时，如果没有加载就会报错，无法执行

希望它能解决您的两个问题。

如果是最佳答案请采纳

不断提问，不断学习。

谢谢...

无法将 jQuery 嵌入到 @Html.ActionLink()

Can't embed jQuery to @Html.ActionLink()

javascript

jquery

html.actionlink

asp.net-mvc-5.2