Window.location.href doesn't work, why not?
I am having problems with window.location.href. On my website I am using AngularJS (framework). I got a table with the following code:
<table id="MAND">
<tbody id="hoveren">
<tr ng-repeat="artist in artists | filter:name">
<td class="user-name"><img id="{{artist.div}}" style="vertical-align: middle;" src="{{artist.img}}"></td>
<td class="user-email" style="vertical-align: middle;">{{artist.name}}</td>
<td class="user-phone" style="vertical-align: middle;">{{artist.description}}</td>
<td class="user-phone" style="vertical-align: middle;">{{artist.country}}</td>
</tr>
</tbody>
</table>
So you can see that the image gives the div.
Then, in jQuery, I call the following function:
$("#crunch").click(function() {
window.location.href = "http://example.com/new_url";
});
In this case, {{"artist.div"}} was crunch, so #crunch.
Why doesn't it work?
I click on it but nothing happens.
Is this some stupid mistake somewhere?
Thank!
Btw if you want to know my corner piece:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
angular.module('App', [])
.controller('Controller', function($scope){
$scope.artists = [
{
"name": "Crunchyroll",
"country": "All countries except Japan",
"img":"images/crunchy.png",
"description":"You can set it to everything you want!",
"div":"crunch"
},
{
"name": "Rhapsody",
"country": "US only, be at the right spot",
"img":"images/rhap.png",
"description":"You can set it to everything you want!"
},
{
"name": "Febreze",
"country": "US only",
"img":"images/feb.jpg",
"description":"You can set it to everything you want!"
},
{
"name": "Kellogs Froot Loops",
"country": "US only",
"img":"images/kel.jpg",
"description":"You can set it to everything you want!"
},
{
"name": "Pure Asia Garcinia Weight Loss",
"country": "US, AU, CA, UK and NZ only",
"img":"images/bottle.png",
"description":"You can set it to everything you want!"
},
{
"name": "Free Computer",
"img":"images/pc.png",
"description":"You can set it to everything you want!"
},
{
"name": "whateveee",
"country": "All countries except Japan",
"img":"images/crunchy.png",
"description":"You can set it to everything you want!",
"div":"crunch"
}
];
});
Don't start btw, not sure how to insert it.
Thank!
source to share
You need to update your code to the next one. At the time you bind the event, there is no element with id #crunch in the html, so the binding never happens.
So, for dynamically added elements, you need to bind events like the following.
$(document).on('click', '#crunch', function(){
window.location.href = "http://example.com/new_url";
});
source to share
jQuery should really be the last resort here. Prefer Angular methods when available.
Paste $window
into controller:
.controller('Controller', function($scope, $window){
Add this function to your controller:
$scope.go = function(artist) {
$window.location.href = "http://example.com";
};
Change your views to use ng-click
:
<img id="{{artist.div}}" ng-click="go(artist)" ...
source to share