why maphilight library is not working with image maps and handlebar.js

Question

Here is my fiddle. https://jsfiddle.net/vsjtfhkk/

$(function() {
  $('img[usemap]').maphilight()
});

// Define our data object
var context = {
  "url": "http://1jpg-site.orionhub.org:8000/1.jpg",
  "class": "img-responsive center-block map",
  "map": [{
    "shape": "rect",
    "coords": "2,1,106,116",
    "function": "article1()"
  }, {
    "shape": "rect",
    "coords": "111,2,464,114"
  }, {
    "shape": "rect",
    "coords": "476,9,586,116"
  }, {
    "shape": "rect",
    "coords": "4,118,588,136"
  }, {
    "shape": "poly",
    "coords": "3,143,588,143,585,442,354,447,347,338,0,336"
  }, {
    "shape": "rect",
    "coords": "2,340,351,503"
  }, {
    "shape": "rect",
    "coords": "3,508,352,735"
  }, {
    "shape": "rect",
    "coords": "354,450,588,733"
  }]
};
var context1 = {
  "url": "paper\\pages\\17062016\\2.jpg",
  "class": "img-responsive center-block map",
  "map": [{
    "shape": "rect",
    "coords": "2,1,106,116"
  }, {
    "shape": "rect",
    "coords": "111,2,464,114"
  }, {
    "shape": "rect",
    "coords": "476,9,586,116"
  }, {
    "shape": "rect",
    "coords": "4,118,588,136"
  }, {
    "shape": "poly",
    "coords": "3,143,588,143,585,442,354,447,347,338,0,336"
  }, {
    "shape": "rect",
    "coords": "2,340,351,503"
  }, {
    "shape": "rect",
    "coords": "3,508,352,735"
  }, {
    "shape": "rect",
    "coords": "354,450,588,733"
  }]
};

function page1() {
  var source = $("#image-template").html();
  var template = Handlebars.compile(source);
  // Pass our data to the template
  var theCompiledHtml = template(context);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);
}

function page2() {
  var source = $("#image-template").html();
  var template = Handlebars.compile(source);
  // Pass our data to the template
  var theCompiledHtml = template(context1);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);
}

function article1() {
  alert("yes i am passed");
}

I am trying to make an eNewsPaper website with images and image maps.

When I use the maphilight library to highlight image maps with handlebar.js it doesn't work.

I am trying to use:

$('.map').maphilight();

Please give me a solution.

Answer 1

as no one have answerd my question, and i have solved it myself. just a silly mistake i have done that I have to use

.maphilight();

function inside the function scope. this is the correct way of using it

function page1() {
    var source = $("#image-template").html();
    var template = Handlebars.compile(source);
    // Pass our data to the template
    var theCompiledHtml = template(context);

    // Add the compiled html to the page
    $('.content-placeholder').html(theCompiledHtml);
    $('.map').maphilight();
    $('#prev').addClass("disabled");
    $('#prev').removeClass("active");
    $('#2').removeClass("active");
    $('#3').removeClass("active");
    $('#next').removeClass("active");
    $('#1').addClass("active");


}

not this.

$(function() {
  $('img[usemap]').maphilight()
});

thanks @jwpfox for editing the question.