无法将jQuery嵌入到@ Html.ActionLink（）
[英]Can't embed jQuery to @Html.ActionLink()
问题描述
I have a small problem with the @Html.ActionLink tag. 
@Html.ActionLink标记有一个小问题。 I want to change the background when clicking on it. 我想在单击时更改背景。 But it doesn't work. 但这是行不通的。
<ul>
<li>@Html.ActionLink("View Profile", "Profile", "User", null, new { id = "profile" })</li>
</ul>
and the jQuery code: 和jQuery代码：
$("#profile").click(function () {
document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});
But I have tried on w3schools, it already worked: 但是我尝试过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>
Can you help me? 你能帮助我吗？
p/s: Here is my sub-question: p / s：这是我的子问题：
Can you tell me what is the different between: 你能告诉我有什么区别：
<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>
and 和
<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>
If I change the position of line <a id="profile" href"">View profile</a> to the end, the code won't work. 如果我将<a id="profile" href"">View profile</a>行的位置更改为结尾，则该代码将无效。
Why? 为什么？
3 个解决方案
解决方案1
0 2015-05-25 08:56:05
Whenever the script executes it is looking for a dom with id = "profile" and since it hasn't loaded on the page yet, the event will not get bound. 每当脚本执行时，它都会查找id =“ profile”的dom，并且由于尚未将其加载到页面上，因此该事件将不会被绑定。
you can fix this by wrapping your code in document ready event: 您可以通过将代码包装在文档就绪事件中来解决此问题：
$(document).ready(function(){
//add event here
});
or in the jquery shorthand notation: 或在jQuery速记符号中：
$(function(){
//add event here
});
Any code inside here will fire once your html has loaded. 载入html后，此处的任何代码都会触发。
Another fix to this is to place the event on the document itself and use the 'on' method to specify you are looking for #profile: 对此的另一种解决方法是将事件放置在文档本身上，并使用“ on”方法指定您要查找的#profile：
$(document).on('click', '#profile', function(){
//do stuff
});
解决方案2
0 2015-05-25 09:01:30
I think your problem is because the DOM elements are not fully loaded when the script is starting execution. 我认为您的问题是因为脚本开始执行时DOM元素未完全加载。 You could solve the problem if wrap the script like this: 如果像这样包装脚本，则可以解决问题：
$(document).ready(function(){
$("#profile").click(function () {
document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});
});
解决方案3
0 已采纳 2015-05-25 09:06:38
Answer to the main question 回答主要问题
It is because your code is running when your page elements are not loaded. 这是因为未加载页面元素时代码正在运行。 So please put script to the bottom or try the following script: 因此，请将脚本放在底部或尝试以下脚本：
$(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)";
});
});
Though you may use the above code and it works, I would recommend you to put the <script> tag always at the bottom of the page to speed up the page load time. 尽管您可以使用上面的代码并且有效，但是我建议您始终将<script>标记放在页面底部，以加快页面加载时间。
Anyway you can do any of these. 无论如何，您可以执行任何这些操作。
Answer to your sub-question: 回答您的子问题：
It's because when javascript(Jquery) searches for the dom with the id you specified, if it is not loaded it gives out an error and prevents execution. 这是因为当javascript（Jquery）使用您指定的ID搜索dom时，如果未加载它会发出错误并阻止执行。
Hope it solves both of your questions. 希望它能解决您的两个问题。
Please accept if it is the best answer. 如果是最佳答案，请接受。
Keep Asking Keep Learning. 不断询问，不断学习。
Thanks... 谢谢...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.