maphilightライブラリがイメージマップとhandlebar.jsで動作しない理由

Question

ここは私のフィドルです。 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"); 
} 

私はイメージとイメージマップでeNewsPaperのウェブサイトを作るしようとしています。

maphilightライブラリを使用してhandlebar.jsの画像マップを強調表示すると機能しません。

私が使用しようとしています：

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

は私に解決策を教えてください。

Answer 1

誰も私の質問に答えてくれませんでした。私はそれを自分で解決しました。私はちょうど愚かな間違いを私は使用しなければならないとした

.maphilight(); 

関数のスコープ内で機能します。 これは正しい使い方です。

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"); 


} 

これはこれではありません。

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

質問を編集するための@jwpfoxに感謝します。