我在这里有一个网站http://galnova.com
这是标记
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="2015/css/g15.css" rel="stylesheet" />
</head>
<body class="index">
<div class="header">
<ng-include src="'_master_includes/header.html'"></ng-include>
</div>
<div class="container-fluid nill">
<div class="bg_bottom_stretch">
<div class="bg_top_center">
<div class="evertin">
<div class="caste">
<!-- Caste -->
<ng-include src="'_master_includes/caste.html'"></ng-include>
</div>
<div class="in_content">
<!-- Content -->
<ng-include src="'_master_includes/in_content.html'"></ng-include>
</div>
<div class="sub_footer">
<!-- Sub Footer -->
<ng-include src="'_master_includes/sub_footer.html'"></ng-include>
</div>
<div class="toop4"><span>Social Media</span></div>
<footer>
<!-- Footer -->
<ng-include src="'_master_includes/footer.html'"></ng-include>
</footer>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="2015/js/instafeed.min.js"></script>
<script src="2015/js/g15.js"></script>
<script>
$(function(){
var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token
// var date = new Date(parseInt(data.data[i].created_time) * 1000);
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
if ( photos === 200 ) { return false; }
var date = new Date(parseInt(this.created_time) * 1000);
// template
$(
'<div class="col-sm-6 col-md-4 col-lg-2 grip_wrap">' +
'<div class="grip_hang_topp"></div>' +
'<div class="col grip">' +
'<img class="pp" title="" src="' + this.user.profile_picture + '" />' +
'<div class="coat">' + this.user.username + '</div>' +
'<a title="' + this.caption.text + '" class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' +
'<img src="' + this.images.thumbnail.url + '" />' +
'</a>' +
'<div class="col coat2 truncate">' + this.caption.text + '</div>' +
'<div class="row nill">' +
'<span class="col-sm-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
'<span class="col-sm-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
'</div>' +
'<span class="col check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
'<a href="' + this.link + '" target="_blank"><button class="col-12 btn btn-primary">View in Instagram</button></a>' +
'</div>' +
'<div class="grip_hang_bott"></div>' +
'</div>'
).appendTo('#instafeed');
});
});
});
$('.grip').hover(function(e){
$(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
return false;
});
</script>
</body>
<a href="#" class="scrollup"></a>
</html>
我无法获取我在html页面上编写的jquery片段
这是片段
$('.grip').hover(function(e){
// "use strict";
// e.preventDefault();
// if ($(window).width() > 991) {
//alert('TEST!!!');
$(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
return false;
// }
});
我也无法让jquery在我的js文件中的任何地方工作
这是js文件http://galnova.com/2015/js/g15.js
$(document).ready(function () {
//Page Loads/*
"use strict";
$(document).on('click', '.toggleAll', function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
var el = $(this);
el.text() === el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap"));
});
$(window).scroll(function () {
if ($(this).scrollTop() > 52) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
(function ($) {
"use strict";
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
$(document).on('click','.toop',function () {
"use strict";
$('#m1').slideToggle('fast');
});
$(document).on('click','.toop2',function () {
"use strict";
$('#m2').slideToggle('fast');
});
//Resume Slider
$(document).on('mouseenter mouseleave','[id^=claps]',function () {
"use strict";
var idNumber = $(this).attr("id").replace("claps", "");
if ($(window).width() > 800) {
$('.inco'+idNumber).stop().animate({width: 'toggle', height: '125px'});
}
});
$(document).on('click','#menulink',function (event) {
"use strict";
event.preventDefault();
if ($('.navigation-wrapper').hasClass('show-menu')) {
$('.navigation-wrapper').removeClass('show-menu');
$('.navigation').hide();
$('.navigation li').removeClass('small-padding');
} else {
$('.navigation-wrapper').addClass('show-menu');
$('.navigation').fadeIn();
$('.navigation li').addClass('small-padding');
}
});
//////////////////////////
//This controls the music playback on the media page
window.addEventListener("play", function(evt)
{ "use strict";
if(window.$_currentlyPlaying)
{
window.$_currentlyPlaying.pause();
}
window.$_currentlyPlaying = evt.target;
}, true);
$('.fancybox').fancybox();
请帮助我理解为什么该代码段不能在页面上工作，只能在控制台中使用
答案 0 :(得分：1)
由于您在文档就绪事件处理程序中创建.grip元素，因此返回JSON异步请求
$(function () {
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
// Your code creating .grip elements
}
});
但是您要在页面末尾添加悬停事件处理程序，在文档就绪事件处理程序之外和JSON异步请求返回之外，在添加悬停事件处理程序时，您的.grip元素不存在（但是当您在控制台中执行代码时，元素已经存在。）
解决方案1：
您可以在创建.grip元素后，在JSON请求返回中移动代码，添加悬停事件处理程序。
$(function () {
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
// Your code creating .grip elements
}
$('.grip').hover(function(e){
$(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
return false;
});
}
});
解决方案2：
您可以更改jQuery悬停事件处理程序绑定以使用事件委派功能。 http://api.jquery.com/on/
$('#instafeed').on('mouseover', '.grip', function(e){
$(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
return false;
});