window.location.href 不工作，为什么不呢？答案

【问题标题】：window.location.href not working, why not?window.location.href 不工作，为什么不呢？
【发布时间】：2015-09-13 19:30:27
【问题描述】：

window.location.href 有一些问题。在我的网站中，我使用 AngularJS（框架）。我得到了一张包含以下代码的表格：

<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>

所以你看到给图像一个 divname。

然后在jQuery中，我调用如下函数：

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

在这种情况下，{{"artist.div"}} 等于 crunch，这就是 #crunch 的原因。

为什么这不起作用？

我点击它但没有任何反应。

这是某种愚蠢的错误吗？

谢谢！

顺便说一句，如果你想知道，我的 angularjs 部分：

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

});

顺便说一句，不知道怎么放。

谢谢！

【问题讨论】：

您的 jQuery 代码可能在这些 div 分配该 ID 之前运行，因此事件侦听器无法附加到不存在的元素。我强烈建议您改用 ng-click。

标签： javascript jquery html css angularjs

【解决方案1】：

您需要将代码更新为以下内容。在您绑定事件时，html 中没有 id 为 #crunch 的元素，因此永远不会发生绑定。

所以，对于动态添加的元素，你需要像下面这样绑定事件。

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

【讨论】：

【解决方案2】：

如果在附加事件处理程序时存在 ID 为 crunch 的元素，您的代码应该可以工作，但它似乎不存在。使用委托事件来解决这个问题

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

【讨论】：

【解决方案3】：

jQuery 真的应该是最后的手段。最好使用可用的 Angular 方法。

将$window 注入您的控制器：

.controller('Controller', function($scope, $window){

将此功能添加到您的控制器：

$scope.go = function(artist) {
  $window.location.href = "http://example.com";
};

更改您的视图以使用ng-click：

<img id="{{artist.div}}" ng-click="go(artist)" ...

Plunker demo.

【讨论】：