为什么我的HTML似乎无法访问我的javascript
Why does it seem that my HTML does not access my javascript?
我正试图将图像扩展到一个可移动的小窗口中。html是用xslt创建的，但这里是img标记，它应该在单击时展开。我试过使用onclick="functionname()"，但它说函数没有定义。
<img class='AOIMapFir' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=100&height=85&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=100&height=85');"></img>
这是javascript:中的函数
NPSIMapPopUp : function(){
$('.AOIMapFir').click(function(){
$('#dialog').dialog({
appendTo: ".widget",
title: "Area of Interest",
resizable: false,
position: {
my: "center",
at: "center",
of: ".container"
},
width: "auto",
height: "auto",
closeOnEscape: true,
show: { effect: "blind", duration: 200 }
});
$("#dialog").dialog("open");
$(".ui-widget").css({
"font-size": +10+"px",
"background-color": "none"
});
});
}
我曾尝试在js文件的顶部使用'click .AOIMapFir' : 'NPSIMapPopUp'，但当我调试时，我从未看到它进入我尝试过的函数。谢谢你的帮助！
<xsl:if test="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes">
<li class="attr">
<div class="col1"></div>
<div class="col2">Raster Types</div>
<div class="col3">
<xsl:for-each select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes">
<!-- shift the context to the lookup elements -->
<xsl:variable name="raster_label">
<xsl:apply-templates select="$metacard_label-top">
<xsl:with-param name="curr-label" select="@codeList"/>
</xsl:apply-templates>
</xsl:variable>
<xsl:choose>
<xsl:when test=". != ''"> <!-- If the element value is not null, display it. Else display attribute value. -->
<xsl:value-of select="." /> - <xsl:value-of select="$raster_label" /><br />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@codeListValue" /> - <xsl:value-of select="$raster_label" /><br />
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="rasterType" select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes"></xsl:variable>
<xsl:variable name="identifier" select="/tdf:TrustedDataObject/tdf:HandlingAssertion/tdf:HandlingStatement/edh:ExternalEdh/edh:Identifier"></xsl:variable>
<xsl:variable name="codeLVal" select="@codeListValue"/>
<xsl:variable name="aoi_min_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:westBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_min_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:southBoundLatitude/gco:Decimal"/>
<xsl:variable name="aoi_max_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:eastBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_max_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:northBoundLatitude/gco:Decimal"/>
<img class='AOIMapFir' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=100&height=85&layer={$identifier}_{$codeLVal}' ></img><!-- this works -->
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable {$identifier}" style="display: none; height: auto; width: auto; font-size: 10px;" tabindex="-1" role="dialog" aria-describedby="dialog" aria-labelledby="ui-id-1"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Area of Interest</span><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close" style="font-size: 10px;"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button></div><div id="dialog" class="hide-dialog ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 81px; max-height: none; height: auto;"><img class='aoi' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300');"></img></div></div>
</xsl:for-each>
</div>
</li>
</xsl:if>
我最终能够创建一个有效的点击事件的唯一方法是将点击函数绑定到js文件中的render函数内部。
define(
[ 'sandbox', 'text!../templates/unitinfo.html',
'../collections/metacards', '../models/metacard',
'cdpe$/metacard-view', 'cdpe_config',
'third/jquery.mCustomScrollbar', 'third/jstree' ],
function(sandbox, unitInfoTemplate, MetacardsCol, Metacard,
MetacardView, cdpeConfig) {
var AppView = sandbox.mvc
.View({
unitInfoTemplate : sandbox.template
.parse(unitInfoTemplate),
collection : new MetacardsCol(),
events : {
'click .close' : function() {
sandbox.emit("preview-pane.close");
},
'click .mc-menu li' : 'switchTab',
'click .findUIC' : 'findUIC',
'click .newProjectBtn' : 'SubmitNewProject',
'click .entity-dropdown' : 'showEntityMenu',
'click .findMission' : 'findMission',
'click .oob-dropdown' : 'showOOBMenu',
'click .jstree-icon' : 'insertSearchIcon',
'click .AOIMap' : 'AOIMapPopUp',
'click .SAOIMap' : 'SAOIMapPopUp'
},
initialize : function() {
sandbox.events.bindAll(this);
this.collection.bind('change:html', function() {
});
$(window).scroll(
function() {
$('.preview-pane').css('left',
850 - $(window).scrollLeft());
});
$(window)
.resize(
function() {
this
.$('.mc')
.css(
'height',
$(window)
.height()
- 220
+ 'px')
.mCustomScrollbar(
{
theme : "cdpe-preview",
advanced : {
updateOnContentResize : true
}
});
});
},
load : function(options) {
sandbox.logger.info('Loading Preview Content');
this.$el.css('display', 'inline-block');
this.getMetacard(options);
/*
* var model = new Metacard( { id: object } ), that =
* this; model.bind('change:html', function() {
* that.$('.content').html(model.get('html'));
* that.$('.mc''.display').metacardView(); });
*/
},
hide : function(object) {
this.$el.css('display', 'none');
},
render : function(model) {
var that = this;
this.$('.mc''.display').remove();
this.$('.ph').remove();
this.$('.content').append(
this.addRowShading(model.get('html')));
this.$('.mc''.display').metacardView();
this.$('.mc').css('height',
$(window).height() - 220 + 'px')
.mCustomScrollbar({
theme : "cdpe-preview",
advanced : {
updateOnContentResize : true
}
});
this.createExpandingAttrs();
// this.$( '.mc''.display'
// ).metacardView('setTabContent', { name:'oob',
// title: 'Order of Battle Hierarchy' , content:
// '<div id="oob_hierarchy"></div>'});
this.$("#oob_hierarchy").jstree({
"json_data" : {
"data" : model.get('oob-tree-json')
},
"plugins" : [ "themes", "json_data", "ui" ],
"themes" : {
"theme" : "classic",
"dots" : false,
"icons" : true
}
}).bind("select_node.jstree",
function(event, data) {
if (data.rslt.obj.data("unit-info")) {
that.toggleUnitInfo(data.rslt.obj);
}
});
// this.$( '.mc''.display'
// ).metacardView('setActiveTab', { tabName: 'oob' }
// );
>>>>>>>>>>>>>>> $('.AOIMapFir').click(function(){
Alertify.dialog.alert('clicked');
})
this.delegateEvents();
},
createExpandingAttrs : function() {
this.$(".attr.expand ul .toggle").bind(
'click',
function(event) {
var topLine = $(this).closest("li");
if ($(this).hasClass('closed')) {
$(this).removeClass("closed")
.addClass("open"); // toggle
// plus/minus
topLine.siblings().css("display",
"list-item"); // toggle
// hidden
// lines
} else {
$(this).removeClass("open")
.addClass("closed");
topLine.siblings().css('display',
'none');
}
return false;
});
},
insertSearchIcon : function(evt) {
var treeExists = $('.jstree-icon').html();
var currentTarget = $(evt.currentTarget);
if (treeExists != null) { // Check to see if tree
// exists
var elementExists = document
.getElementsByClassName('oob-dropdown');
zero = 0;
if (elementExists.length == zero) { // Check to
// see if
// button is
// already
// there
$('.jstree-leaf')
.each(
function() { // If not a
// unit put
// button
var id = this.id;
if (id.indexOf("unit") == -1) {
$(this)
.prepend(
'<button class="oob-dropdown" id="oob-button"></button>');
}
});
}
}
},
getMetacard : function(options) {
// this.insertSearchIcon();
this.$('.mc''.display').remove();
this.$('.ph').remove();
this.$('.content').append(
'<span class="ph">Loading</span>');
var self = this, model = this.collection
.get(options.id);
if (model && model.get('html')) {
this.render(model);
} else if (model) {
sandbox.logger
.info('Model html empty, attempting fetch from server');
model.fetch({
error : function(model, jqXHR, options) {
sandbox.emit('error', {
action : 'initialError',
jqXHR : jqXHR
});
}
});
} else {
sandbox.logger
.info('Model not in local storage, fetching from server');
model = this.fetchMetacard(options);
if (model) {
model.once('change:html', function() {
if (this.get('oob-tree-json')) {
self.render(this);
}
});
model.once('change:oob-tree-json',
function() {
if (this.get('html')) {
self.render(this);
}
});
}
}
},
fetchMetacard : function(options) {
var metacard = (options && options.id)
&& new Metacard({
id : options.id
});
// metacard.fetch();
this.collection.add(metacard);
return metacard;
},
preview : function() {
this.$('.preview-pane').toggleClass('hover');
},
toggleUnitInfo : function(node) {
var info = node.children('.unit-info');
if (info.length && info.css('display') === 'none') {
info.css('display', 'block');
} else if (info.length) {
info.css('display', 'none');
} else {
this.showUnitInfo(node);
}
},
showUnitInfo : function(node) {
var unitInfo = node.data("unit-info"), obj = {
data : {}
}, a = node.children('a');
for ( var attr in unitInfo) {
obj.data[this.capitalise(attr)] = unitInfo[attr];
}
$(this.unitInfoTemplate(obj)).insertAfter(a);
},
switchTab : function(evt) {
var tab = $(evt.currentTarget), pageName = tab
.data('page'), page = this
.$('.' + pageName), activePage = this.$(
'.mc-menu .active').data('page');
// if the tab is already active, do nothing
if (!tab.hasClass('active')) {
this.$('.mc-menu .active')
.removeClass('active');
this.$('.' + activePage).css({
"display" : "none"
});
tab.addClass('active')
page.css({
"display" : "block"
});
}
},
capitalise : function(string) {
return string.charAt(0).toUpperCase()
+ string.slice(1);
},
findUIC : function(evt) {
evt.preventDefault();
var uic = $(evt.currentTarget).data('uic');
sandbox.emit("search-submit", {
query : uic
});
// function (e){
// var thumbContainer =
// document.getElementById("findUIC");
// var thumbnail = document.createElement("img");
// thumbnail.onload=function() {
// thumbContainer.appendChild(thumbnail);
// }
// thumbnail.src = "../apps/";
// }
},
findMission : function(evt) {
evt.preventDefault();
var queryData = $(evt.currentTarget)
.data('mission');
var mission = "MissionAreaFacet:" + queryData;
sandbox.emit("search-submit", {
query : mission
});
},
SubmitNewProject : function() {
var proj = this.$('.projectTitle').text();
// var proj = node.data("projectTitle");
// var proj = node.data("projectTitle"), obj = {
// data : {} }, a = node.children('a');
// var unit_title =
// $(this.unitInfoTemplate(obj)).insertAfter(a);
// var proj =
// $(this.unitInfoTemplate(obj)).insertAfter(a);
Alertify.dialog.alert(proj);
sandbox.emit("edcss-add", proj);
},
addRowShading : function(html) {
var $mc = $(html);
$('.page', $mc)
.each(
function(index, value) {
$(this)
.children('ul')
.children('li')
.each(
function(index,
value) {
if (index % 2 === 0) {
$(value)
.addClass(
"even")
}
;
})
});
return $mc;
},
SAOIMapPopUp : function(evt) {
$('#dialog2').dialog({
appendTo : ".widget",
title : "Area of Interest",
resizable : false,
position : {
my : "center",
at : "center",
of : ".container"
},
width : "auto",
height : "auto",
closeOnEscape : true,
show : {
effect : "blind",
duration : 200
}
});
// $('body').append('<img
// src="/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=80&height=80"></img></div>');
$("#dialog2").dialog("open");
$(".ui-widget").css({
"font-size" : +10 + "px",
"background-color" : "none"
});
},
AOIMapPopUp : function(evt) {
$('#dialog').dialog({
appendTo : ".widget",
title : "Area of Interest",
resizable : false,
position : {
my : "center",
at : "center",
of : ".container"
},
width : "auto",
height : "auto",
closeOnEscape : true,
show : {
effect : "blind",
duration : 200
}
});
$("#dialog").dialog("open");
$(".ui-widget").css({
"font-size" : +10 + "px",
"background-color" : "none"
});
},
showEntityMenu : function(evt) { // Drop down menu
// for EDCSS
// Note: the message column in the logtransaction
// file size
// needs to be increased for the search related
// query to work (10000)
var btn = $(evt.currentTarget);
zero = 0;
minus = -1;
entityName = btn.siblings('span').text(),
entityMap = _.where(
cdpeConfig.oobEntityMap, {
"edcss name" : entityName
});
if (entityMap.length == zero) {
entityMap = null;
}
function getRelEnt(eMap) { // Pull each related OOB
// entity
if (eMap != null) {
var result = "";
var numOfObj = eMap.length;
for (i = 0; i < numOfObj; i++) {
if (i + 1 == numOfObj) {
result += '"' + eMap[i]["obs name"]
+ '"' + " OR " + entityName;
} else {
result += '"' + eMap[i]["obs name"]
+ '"' + " OR ";
}
}
return result;
}
}
html = '<div class="entity-dropdown-menu">'
+ '<ul><li class="search-exact">Search Exact Text</li>';
html += entityMap ? '<li class="search-related">Search Related OOB Entities</li></ul></div>'
: '</ul></div>'
$dropdown = $(html);
btn.addClass('open').after($dropdown);
// Prevents from double opening of same menu
btn.on('click', function(event) {
if (btn.find(".entity-dropdown-menu")) {
$dropdown.remove();
}
});
$(document)
.on(
'click',
function(event) { // Gets the menu
// to close when
// clicking
// anywhere else
if (!$(event.target).closest(
btn).length) {
if (btn.hasClass('open')
&& $dropdown
.is(':visible')) {
btn.removeClass('open');
$dropdown.remove();
}
}
});
(function() { // Sets the behavior of button/menu
var time = 1000, timer;
function handlerIn() {
clearTimeout(timer);
$dropdown.stop(true).css('opacity', 1)
.show();
}
function handlerOut() {
timer = setTimeout(function() {
$dropdown.fadeOut(500);
btn.removeClass('open');
}, time);
}
$dropdown.hover(handlerIn, handlerOut);
$(evt.currentTarget).hover(handlerIn,
handlerOut);
}());
var fixEntNme = entityName; // Replaces / with a
// space from the
// entityName to allow
// for searching exact
// terms
while (fixEntNme.search("/") != minus) {
fixEntNme = fixEntNme.replace("/", " ");
}
entityName = fixEntNme;
$dropdown.on('click', '.search-exact', function() {
sandbox.emit("search-submit", {
query : entityName,
resetFilters : true
});
});
$dropdown.on('click', '.search-related',
function() {
sandbox.emit("search-submit", {
query : getRelEnt(entityMap),
resetFilters : true
});
});
},
showOOBMenu : function(evt) { // Drop down menu for
// JTDS
$(".oob-dropdown-menu").each(function() {
$(".oob-dropdown-menu").remove();
});
var btn = $(evt.currentTarget);
zero = 0;
minus = -1;
entityName = btn.siblings('a').text();
entityName2 = entityName.substring(1,
entityName.length);
entityMap = _.where(cdpeConfig.oobEntityMap, {
"obs name" : entityName2
});
if (entityMap.length == zero) {
entityMap = null;
}
function getRelEnt(eMap) { // Pull each related OOB
// entity
if (eMap != null) {
var result = "";
var numOfObj = eMap.length;
for (i = 0; i < numOfObj; i++) {
if (i + 1 == numOfObj) {
result += '"'
+ eMap[i]["edcss name"]
+ '"' + " OR "
+ entityName2;
} else {
result += '"'
+ eMap[i]["edcss name"]
+ '"' + " OR ";
}
}
return result;
}
}
html = '<div class="oob-dropdown-menu">'
+ '<ul><li class="search-exact">Search Exact Text</li>';
html += entityMap ? '<li class="search-related">Search Related EDCSS Entities</li></ul></div>'
: '</ul></div>'
$dropdown1 = $(html);
btn.addClass('open').before($dropdown1);
// Prevents from double opening of same menu
btn.on('click', function(event) {
$(".oob-dropdown.open").each(
function() {
$(".oob-dropdown.open")
.removeClass('open');
});
});
$(document)
.on(
'click',
function(event) { // Gets the menu
// to close when
// clicking
// anywhere else
if (!$(event.target).closest(
btn).length) {
if (btn.hasClass('open')
&& $dropdown1
.is(':visible')) {
btn.removeClass('open');
$dropdown1.remove();
}
}
});
(function() { // Sets the behavior of button/menu
var time = 1000, timer;
function handlerIn() {
clearTimeout(timer);
$dropdown1.stop(true).css('opacity', 1)
.show();
}
function handlerOut() {
timer = setTimeout(function() {
$dropdown1.fadeOut(500);
btn.removeClass('open');
}, time);
}
$dropdown1.hover(handlerIn, handlerOut);
$(evt.currentTarget).hover(handlerIn,
handlerOut);
}());
$dropdown1.on('click', '.search-exact', function() {
sandbox.emit("search-submit", {
query : entityName2,
resetFilters : true
});
});
$dropdown1.on('click', '.search-related',
function() {
sandbox.emit("search-submit", {
query : getRelEnt(entityMap),
resetFilters : true
});
});
}
}); // End AppView
return AppView;
});
相关文章：
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- 如何建立一个网页，检查我的路由器网络接口是否可以访问
- 我可以访问量角器配置文件中的参数吗
- 如何在PHP中使用url保护我的图像和文件夹免受直接访问
- 数组中的对象，我如何访问它们
- Epic编辑器可以't访问我的文本区轨道
- 为什么我的HTML似乎无法访问我的javascript
- 如何使用其他 JavaScript 文件中的新类访问我的 createjs 导出的 js 文件
- 我无法访问 IIFE 中定义的变量
- 尝试从我的 chrome 扩展程序访问 gmail 中的 iframe 时出现未定义的错误，但不是从开发者控制台访问
- 为什么我无法访问使用 $provide.provider 和 $injector.get 创建的服务
- 我如何访问在 Angular JS 的 .then(） 中定义的$scope数组
- 无权访问我的控制器 Angular 中的属性.js 1.3
- 将我的nextPage(）函数编写为全局函数，以便onclick事件可以访问它
- 无法在 Javascript 中访问我的二维数组
- 我如何访问 iframe 中 URL 的参数
- 我的Javascript项目正在访问网络摄像头，但没有显示任何内容
- 为什么我的firefox扩展javascript不能访问opener窗口，也看不到window.name
- 我的用户可以通过单击Ajax之外的按钮来访问$_SESSION的内容吗
- 声明一个js变量，该变量将被我的2个jsp访问
