jQuery地图高亮显示-在准备好DOM时工作良好，但在由AJAX加载时失败

Question

这是uni的任务，我已经做了一些事情。请转到受密码保护的目录：my server

在提示符中输入用户名"uts“和密码"10479475"，两者均不带引号，即可看到该网页。

基本上，如果你将鼠标悬停在worldmap左上角的内容上，你可以看到下面的区域被一个灰色区域和一个红色边框“高亮显示”。这是使用一个jQuery插件完成的：at here

这部分工作得很好，但是，在我使用jQuery异步加载特定大陆地图后，新加载的图像无法正常工作。在Firebug下测试，我可以看到插件不“喜欢”新的图像，因为我找不到画布或其他自动生成的东西，可以建立在世界地图。

所有的功能都是在master.js中完成的，我相信你可以下载一个副本并在那里检查代码。我真的希望我已经按照插件文档页面上的教程进行了学习，但我就是无法通过最后的阶段。

用于html中的worldmap的代码：

<img id="worldmap" src="./img/world.gif" alt="world.gif" 
width="398" height="200" class="map" usemap="#worldmap"/>
<map name="worldmap">
<area class='continent' href="#" shape="poly" title="North_America" 
coords="1,39, 40,23, 123,13, 164,17, 159,40, 84,98, 64,111, 29,89" />
    </map>

在master.js中用于worldmap的代码

//when DOM is ready, do something
$(document).ready(function()
{   
    $('.map').maphilight(); //call the map highlight main function
}

相比之下，用于特定大陆地图的代码：

//helper function to load specific continent map using AJAX
function loadContinentMap(continent)
{
$('#continent-map-wrapper').children().remove();    //remove all children     nodes first

//inspiration taken from online : http://jqueryfordesigners.com/image-loading/
$('#continent-map-wrapper').append("<div id='loader' class='loading'><div>");

var img = new Image();  // wrap our new image in jQuery, then:

// once the image has loaded, execute this code
$(img).load(function () 
{    
  $(this).hide();   // set the image hidden by default

  // with the holding div #loader, apply:
  // remove the loading class (so no background spinner),
  // then insert our image
  $('#loader').removeClass('loading').append(this);

  // fade our image in to create a nice effect
  $(this).fadeIn();
}).error(function () 
{
    // if there was an error loading the image, react accordingly
    // notify the user that the image could not be loaded
    $('#loader').removeClass('loading').append("<h1><div class='errormsg'>Loading image failed, please try again! If same error persists, please contact webmaster.</div></h1>");
})
//set a series of attributes to the img tag, these are for the map high lighting plugin.
.attr('id', continent).attr('alt', '' + continent).attr('width', '576').attr('height', '300')
.attr('usemap', '#city_' + continent).attr('class', 'citymap').attr('src', './img/' + continent + '.gif');
// *finally*, set the src attribute of the new image to our image

//After image is loaded, apply the map highlighting plugin function again.
$('.citymap').maphilight();

$('area.citymap').click(function()
{
    alert($(this).attr('title') + ' is clicked!');
});

}

很抱歉代码太乱了，还没有重构。

我想知道为什么大陆地图上的画布消失了。我做错什么了吗。

任何提示都是非常感谢的，并感谢任何提前的建议！

Answer 1

如果我在火狐的JavaScript控制台中输入$('.citymap').maphilight();，这一切都能很好地工作。

您调用它太早了-看起来您在将<img>添加到DOM之前调用了它。

Answer 2

查看您提供的代码，问题似乎确实在于您试图在被调用的元素在DOM中存在之前调用maphilight。

只有在$(img).load运行之后，图像才会被添加到DOM中，所以$('.citymap').maphilight();可能会进入DOM。