Can't embed jQuery to @Html.ActionLink()
Question
I have a small problem with the @Html.ActionLink tag. 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:
$("#profile").click(function () {
document.getElementById("profile").style.background = "linear-gradient(#00ff66, #00ff99, #00ff66)";
});
But I have tried on w3schools, it already worked:
<!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:
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.
Why?
3 answers
solution1
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.
you can fix this by wrapping your code in document ready event:
$(document).ready(function(){
//add event here
});
or in the jquery shorthand notation:
$(function(){
//add event here
});
Any code inside here will fire once your html has loaded.
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:
$(document).on('click', '#profile', function(){
//do stuff
});
solution2
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. 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)";
});
});
solution3
0 ACCPTED 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.
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.
Hope it solves both of your questions.
Please accept if it is the best answer.
Keep Asking Keep Learning.
Thanks...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.