Javascript 点击时手柄js未触发
嗨 我必须简单地点击一下从json为锚标记动态加载的数据。我试着用vanila js和jquery两种方法都做了，但我都没能做到。不确定这里有什么问题。正常添加的html也会触发相同的函数Javascript 点击时手柄js未触发,javascript,jquery,html,handlebars.js,Javascript,Jquery,Html,Handlebars.js,嗨 我必须简单地点击一下从json为锚标记动态加载的数据。我试着用vanila js和jquery两种方法都做了，但我都没能做到。不确定这里有什么问题。正常添加的html也会触发相同的函数 {{#pagination info.page.current_page info.page.per_page info.page.total_result_count}} <div id="pagination" class="pagination">{{#unless startFro
{{#pagination info.page.current_page info.page.per_page info.page.total_result_count}}
<div id="pagination" class="pagination">{{#unless startFromFirstPage}}
<a href="#"><</a> {{/unless}} {{#each pages}} {{#if isCurrent}} [
<a href="#">{{page}}</a> ] {{/if}} {{#unless isCurrent}}
<a href="#">{{page}}</a> {{/unless}} {{/each}} {{#unless endAtLastPage}}
<a href="#">></a> {{/unless}}
</div>
{{/pagination}}
var results = {};
var pageNum = 1;
$(document).ready(function () {
getResult(1);
document.getElementById('results').firstElementChild('.pagination').onclick = function () {
var pageNum = $(this).text();
getResult(pageNum);
alert('hi ' + pageNum);
}
function getResult(pageNum) {
$.getJSON('searchResult-' + pageNum + '.json', function (data) {
var compileResult = Handlebars.compile($("#result").html());
fullResult = compileResult(data);
$("#results").html(fullResult);
});
}
});
{{{#分页信息.page.current#page信息.page.per#page信息.page.total#u结果#u计数}
{{{#除非从第一页开始}
{{/除非}{{{#每一页}{{{#如果是当前的}}[
]{{/if}{{{#除非是当前的}}
{{/除非}{{/每一个}{{{#除非endAtLastPage}}
{{/除非}
{{/分页}
var结果={}；
var pageNum=1；
$（文档）.ready（函数（）{
结果（1）；
document.getElementById（'results'）.firstElementChild（'.pagination'）.onclick=function（）{
var pageNum=$（this.text（）；
getResult（pageNum）；
警报（'hi'+pageNum）；
}
函数getResult（pageNum）{
$.getJSON（'searchResult-'+pageNum+'.json'，函数（数据）{
var compileResult=handlebar.compile（$（“#result”）.html（）；
fullResult=compileResult（数据）；
$（“#results”）.html（fullResult）；
});
}
});
{
"record_count": 5,
"records": {
"page": [
{
"body": "A Post in May This post is in the middle of the other ones, so we can show date range filtering with published_at.",
"external_id": "c1173561bd0641bf0f5bd64c4d4d5a68939552c4",
"sections": [
"A Post in May"
],
"title": "A Post in May",
"updated_at": "2015-08-25T06:40:27Z",
"image": "",
"type": "post",
"url": "http://crawler-demo-site.herokuapp.com/2012/05/01/a-post-in-may.html",
"popularity": 1,
"published_at": "2012-05-01T07:00:00Z",
"info": "",
"_index": "crawled",
"_type": "page",
"_score": 1,
"_version": null,
"_explanation": null,
"sort": null,
"highlight": {
"title": "A <em>Post</em> in May",
"sections": "A <em>Post</em> in May",
"body": "A <em>Post</em> in May This post is in the middle of the other ones, so we can show date range filtering with published_at."
},
"id": "5025a3036052f6b650000008"
},
{
"body": "First Post! Here is the first post on my site.",
"external_id": "9508ace2e1ba669854eb49fbe9429952ff1a6d4c",
"sections": [
"First Post!"
],
"title": "First Post!",
"updated_at": "2015-08-25T06:40:27Z",
"image": "",
"type": "post",
"url": "http://crawler-demo-site.herokuapp.com/2012/01/01/first-post.html",
"popularity": 1,
"published_at": "2012-01-01T08:00:00Z",
"info": "",
"_index": "crawled",
"_type": "page",
"_score": 1,
"_version": null,
"_explanation": null,
"sort": null,
"highlight": {
"title": "First <em>Post</em>!",
"sections": "First <em>Post</em>!",
"body": "First <em>Post</em>! Here is the first post on my site."
},
"id": "5025a3036052f6b650000006"
},
{
"body": "A post with an image This post has a photo. If you look at the metadata, it has an st:image meta tag. This meta tag displays the image as a thumbnail in search results.",
"external_id": "92941161a37a99df8a74040c8a0061cfc266eeec",
"sections": [
"A post with an image"
],
"title": "A post with an image",
"updated_at": "2015-08-25T06:40:27Z",
"image": "http://crawler-demo-site.herokuapp.com/images/cat.jpg",
"type": "post",
"url": "http://crawler-demo-site.herokuapp.com/2012/08/10/post-with-image.html",
"popularity": 1,
"published_at": "2012-08-10T07:00:00Z",
"info": "",
"_index": "crawled",
"_type": "page",
"_score": 3.8706326,
"_version": null,
"_explanation": null,
"sort": null,
"highlight": {
"title": "A <em>post</em> with an image",
"sections": "A <em>post</em> with an image",
"body": "A <em>post</em> with an image This post has a photo. If you look at the metadata, it has an st:image meta tag. This meta tag displays the image as a thumbnail in search results."
},
"id": "5025a3036052f6b650000004"
},
{
"body": "Swiftype Crawler Demo Site Welcome to the Swiftype Crawler Demo Site. Be sure to check out the source code to view the Swiftype meta tags that control how the crawler works. A post with an image A Post in May First Post! Learn more About this site.",
"external_id": "3fccec2102880d859c1cf8f8b60609e62c7ab50b",
"sections": [
"Swiftype Crawler Demo Site"
],
"title": "Swiftype Crawler Demo Site",
"updated_at": "2015-08-25T06:39:41Z",
"image": "",
"type": "page",
"url": "http://crawler-demo-site.herokuapp.com/",
"popularity": 1,
"published_at": "2017-06-28T06:39:54Z",
"info": "",
"_index": "crawled",
"_type": "page",
"_score": 0.009990831,
"_version": null,
"_explanation": null,
"sort": null,
"highlight": {
"body": "Welcome to the Swiftype Crawler Demo Site. Be sure to check out the source code to view the Swiftype meta tags that control how the crawler works. A <em>post</em> with an image A Post in May First Post! Learn more About this site."
},
"id": "5025a3036052f6b650000002"
},
{
"body": "About This Site This site is used for demonstrating the Swiftype Crawler. As you can see from the source code of this page, it has a st:type meta tag with a value of page as opposed to post. This allows filtering of blog posts from regular pages.",
"external_id": "261733cee3ca9c280320efc0d79ad8566ddbb9a9",
"sections": [
"About This Site"
],
"title": "About This Site",
"updated_at": "2015-08-25T06:40:27Z",
"image": "",
"type": "page",
"url": "http://crawler-demo-site.herokuapp.com/about.html",
"popularity": 1,
"published_at": "2017-06-28T06:40:31Z",
"info": "",
"_index": "crawled",
"_type": "page",
"_score": 0.0057682088,
"_version": null,
"_explanation": null,
"sort": null,
"highlight": {
"body": "for demonstrating the Swiftype Crawler. As you can see from the source code of this page, it has a st:type meta tag with a value of page as opposed to <em>post</em>. This allows filtering of blog posts from regular pages."
},
"id": "5025a3046052f6b65000000a"
}
]
},
"info": {
"page": {
"query": "post",
"current_page": 1,
"num_pages": 1,
"per_page": 20,
"total_result_count": 5,
"facets": {}
}
},
"errors": {}
}
{
“记录计数”：5，
“记录”：{
“第页”：[
{
“身体”：“五月的这个帖子在其他帖子的中间，所以我们可以用PuffISHEDYAT AT显示日期范围过滤。”
“外部id”：“c1173561bd0641bf0f5bd64c4d4d5a68939552c4”，
“章节”：[
“五月的帖子”
],
“标题”：“五月的帖子”，
“更新时间”：“2015-08-25T06:40:27Z”，
“图像”：“，
“类型”：“职位”，
“url”：”http://crawler-demo-site.herokuapp.com/2012/05/01/a-post-in-may.html",
"人气":一,，
“发布时间”：“2012-05-01T07:00:00Z”，
“信息”：“，
“_索引”：“已爬网”，
“_类型”：“页面”，
“_分数”：1，
“_version”：空，
“_解释”：空，
“排序”：空，
“亮点”：{
“标题”：“五月的帖子”，
“章节”：“五月的帖子”，
“正文”：“五月这个帖子在其他文章的中间，所以我们可以用PuffISHEDYAT AT显示日期范围过滤。”
},
“id”：“5025a3036052f6b650000008”
},
{
“正文”：“第一篇帖子！这是我网站上的第一篇帖子。”，
“外部id”：“9508ace2e1ba669854eb49fbe9429952ff1a6d4c”，
“章节”：[
“第一个帖子！”
],
“标题”：“第一篇文章！”，
“更新时间”：“2015-08-25T06:40:27Z”，
“图像”：“，
“类型”：“职位”，
“url”：”http://crawler-demo-site.herokuapp.com/2012/01/01/first-post.html",
"人气":一,，
“发布时间”：“2012-01-01T08:00:00Z”，
“信息”：“，
“_索引”：“已爬网”，
“_类型”：“页面”，
“_分数”：1，
“_version”：空，
“_解释”：空，
“排序”：空，
“亮点”：{
“标题”：“第一篇文章！”，
“部分”：“第一篇文章！”，
“正文”：“第一篇帖子！这是我网站上的第一篇帖子。”
},
“id”：“5025a3036052f6b650000006”
},
{
“正文”：“带有图像的帖子此帖子有一张照片。如果查看元数据，它有一个st:image元标记。此元标记在搜索结果中将图像显示为缩略图。”，
“外部id”：“92941161A37A99DF8A7400C8A0061CFC266EEEC”，
“章节”：[
“带有图像的帖子”
],
“标题”：“带有图像的帖子”，
“更新时间”：“2015-08-25T06:40:27Z”，
“图像”：http://crawler-demo-site.herokuapp.com/images/cat.jpg",
“类型”：“职位”，
“url”：”http://crawler-demo-site.herokuapp.com/2012/08/10/post-with-image.html",
"人气":一,，
“发布于”：“2012-08-10T07:00:00Z”，
“信息”：“，
“_索引”：“已爬网”，
“_类型”：“页面”，
“_分数”：3.8706326，
“_version”：空，
“_解释”：空，
“排序”：空，
“亮点”：{
“标题”：“带有图像的帖子”，
“部分”：“带有图像的帖子”，
“正文”：“带有图像的帖子此帖子有一张照片。如果查看元数据，它有一个st:image元标记。此元标记在搜索结果中将图像显示为缩略图。”
},
“id”：“5025a3036052f6b650000004”
},
{
“正文”：“Swiftype Crawler演示站点欢迎访问Swiftype Crawler演示站点。请务必查看源代码以查看控制爬虫工作方式的Swiftype元标记。带有图像的帖子在五月一日发布！了解有关此站点的更多信息。”，
“外部id”：“3FCCEC21080D859C1CF8F8B60609E62C7AB50B”，
“章节”：[
“Swiftype爬虫演示站点”
],
“标题”：“Swiftype爬虫演示站点”，
“更新时间”：“2015-08-25T06:39:41Z”，
“图像”：“，
“类型”：“页面”，
“url”：”http://crawler-demo-site.herokuapp.com/",
"人气":一,，
“发布于”：“2017-06-28T06:39:54Z”，
“信息”：“，
“_索引”：“已爬网”，
“_类型”：“页面”，
“_分数”：0.009990831，
“_version”：空，
“_解释”：空，
“排序”：空，
“亮点”：{
“正文”：“欢迎访问Swiftype爬虫演示网站。请务必查看源代码以查看控制爬虫工作方式的Swiftype元标记。带有图像的帖子五月一日发布！了解有关此网站的详细信息。”
},
“id”：“5025a3036052f6b650000002”
},
{
“正文”：“关于此网站此网站用于演示Swiftype爬虫。从此页面的源代码中可以看到，它有一个st:type meta标记，其值为page而不是post。这允许从常规页面筛选博客帖子。”，
“外部id”：“261733cee3ca9c280320efc0d79ad8
$(document).ready(function () {
getResult(1);
$(document).on('click', '.pagination a', function () {
//alert('hi ' + pageNum);
var pageNum = $(this).text();
getResult(pageNum);
});
function getResult(pageNum) {
$.getJSON('searchResult-' + pageNum + '.json', function (data) {
var compileResult = Handlebars.compile($("#result").html());
fullResult = compileResult(data);
$("#results").html(fullResult);
});
}
});