window.location.href not working, why not?

Question

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!

Answer 1

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