CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Wobba Fam
Wobba Fam

Reputation: 37

window.location.href not working, why not?

I got some problems with window.location.href. In my website I use 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 see the gives the image a divname.

Then in jQuery, I call the following function:

$("#crunch").click(function() {
window.location.href = "http://example.com/new_url";
});

In this case, the {{"artist.div"}} was equal to crunch, so that's why #crunch.

Why isn't this working?

I click on it but nothing happens.

Is it some sort of stupid mistake anywhere?

Thanks!

Btw, if you want to know, my angularjs part:

<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 run btw, didn't know how to put it in.

Thanks!

Upvotes: 3

Views: 946

Answers (3)

Andy Gaskell
Andy Gaskell

Reputation: 31761

jQuery should really be a last resort here. Prefer Angular methods when they are available.

Inject $window into your 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)" ...

Plunker demo.

Upvotes: 1

Claudio Redi
Claudio Redi

Reputation: 68400

Your code should work provided element with id crunch exists by the time event handler is attached and it seems it doesn't. Use delegated events to solve this problem

$("#MAND").on('click', '#crunch', function() {
  window.location.href = "http://example.com/new_url";
});

Upvotes: 3

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

You need to update your code to following. At the time you are binding the event, there is no element with id #crunch in the html, hence, the binding never takes place.

So, for elements added dynamically, you need to bind events like following.

$(document).on('click', '#crunch', function(){
    window.location.href = "http://example.com/new_url";
});

Upvotes: 3

Related Questions