Javascript Can'；t将jQuery嵌入到@Html.ActionLink（）中_Javascript_Jquery_Html.actionlink_Asp.net Mvc 5.2

Javascript Can'；t将jQuery嵌入到@Html.ActionLink（）中

javascript jquery

Javascript Can'；t将jQuery嵌入到@Html.ActionLink（）中,javascript,jquery,html.actionlink,asp.net-mvc-5.2,Javascript,Jquery,Html.actionlink,Asp.net Mvc 5.2,我对@Html.ActionLink标记有一个小问题。我想在点击时改变背景。但它不起作用 <ul> <li>@Html.ActionLink("View Profile", "Profile", "User", null, new { id = "profile" })</li> </ul> 但我在W3学校试过，它已经起作用了： <!DOCTYPE html> <html> <body> <scr

我对

@Html.ActionLink

标记有一个小问题。我想在点击时改变背景。但它不起作用

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

但我在W3学校试过，它已经起作用了：

<!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>


$（“#配置文件”）。单击（函数（）{
document.getElementById（“profile”）.style.background=“线性渐变（#00ff66，#00ff99，#00ff66）”；
});

你能帮我吗

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>


$（“#配置文件”）。单击（函数（）{
document.getElementById（“profile”）.style.background=“线性渐变（#00ff66，#00ff99，#00ff66）”；
});

及


$（“#配置文件”）。单击（函数（）{
document.getElementById（“profile”）.style.background=“线性渐变（#00ff66，#00ff99，#00ff66）”；
});

如果我将第

行的位置更改为末尾，代码将无法工作

为什么？

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

您可以通过在document ready事件中包装代码来解决此问题：

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

或者用jquery速记法：

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

一旦加载html，这里的任何代码都将触发

另一个解决方法是将事件放在文档本身上，并使用“on”方法指定要查找的#profile:

我认为您的问题是因为在脚本开始执行时DOM元素没有完全加载。如果按如下方式包装脚本，则可以解决此问题：

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

对主要问题的答复

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

$(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)";
    });
});

虽然您可以使用上面的代码，并且它可以工作，但我建议您将

标记始终放在页面底部，以加快页面加载时间

不管怎样，你都可以做这些

对你的子问题的答复：

这是因为当javascript（Jquery）使用您指定的id搜索dom时，如果没有加载它，它会发出错误并阻止执行

希望它能解决你的两个问题

如果这是最好的答案，请接受

不断地问，不断地学习

谢谢…

但是我查看了源代码，我看到id被声明为：

是的，但是当脚本执行时，您的id=“profile”元素还不存在，因此您的事件没有绑定。始终欢迎@Kevin

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

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

$(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)";
    });
});