window.location.href不起作用，为什么？

Question

我遇到了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>

所以你可以看到，<div> 标签为图片提供了一个 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"
  }
 ];

});

不要跑，我不知道如何把它放进去。

谢谢！

- Wobba Fam

---

您的 jQuery 代码可能在分配 ID 给那些 div 元素之前就已经运行了，因此事件侦听器无法附加到不存在的元素上。我强烈建议您尝试使用 ng-click。 - yvesmancera

Answer 1

您需要更新您的代码如下。在绑定事件时，HTML中没有ID为#crunch的元素，因此绑定不会发生。

因此，对于动态添加的元素，您需要像以下方式绑定事件。

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

- Nikhil Aggarwal

Answer 2

只要在事件处理程序附加时存在具有id crunch的元素，您的代码应该能够正常工作，但似乎它并不存在。使用委托事件来解决这个问题。

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

- Claudio Redi

Answer 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演示。

- Andy Gaskell