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

【问题标题】：Can't embed jQuery to @Html.ActionLink()无法将 jQuery 嵌入到 @Html.ActionLink()
【发布时间】：2015-05-25 08:50:11
【问题描述】：

@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> 行的位置更改为末尾，代码将无法运行。

为什么？

【问题讨论】：

标签： javascript jquery html.actionlink asp.net-mvc-5.2

【解决方案1】：

回答主要问题

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

$(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 时，如果未加载它会给出错误并阻止执行。

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

如果是最佳答案，请采纳。

不断询问，不断学习。

谢谢...

【讨论】：

永远欢迎@Kevin

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

或在 jquery 简写符号中：

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

一旦你的 html 加载完毕，这里的任何代码都会触发。

对此的另一个解决方法是将事件放在文档本身上并使用“on”方法来指定您正在寻找#profile：

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

【讨论】：

但是我查看源码，我看到id被声明了：<li><a href="/User/Profile" id="profile">View profile</a></li>
是的，但是当你的脚本执行时，你的 id="profile" 元素还不存在，所以你的事件没有绑定。