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>

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

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

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

在这种情况下，{{“artist.div”}}等于紧缩，这就是为什么#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"
		}
	];

});

不要跑btw，不知道怎么把它放进去。

谢谢！

Answer 1

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

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

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

Answer 2

如果附加了时间事件处理程序，并且它似乎没有，那么您的代码应该可以使用id为crunch的元素。使用委托事件来解决此问题

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

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

window.location.href无法正常工作，为什么不呢？

3 个答案: