OnClick jQuery maphilight와 함께 작동하지 않습니다

Question

이미지 맵에 jQuerys maphilight를 사용하고 있습니다. 그러나 기능을 추가 할 때 OnClick="DamageControlModal_OnClick". 그것은 일하지 않거나 그것을 실행합니다. OnClick 호출하려고하는 메서드는 C#입니다.

jQuery에서 OnClick 기능을 사용하려면 필수적인 것이 빠졌습니까? 나는 jQuery에 익숙하지 않으므로 나와 벗겨 드리고 문제 나 수정 사항을 설명하십시오.

jQuery를

<script type="text/javascript"> 
    jQuery(function() { 
     jQuery('.map').maphilight({ fade: true }); 
     jQuery('map > area').easyTooltip();   
    }); 
</script> 

이미지 맵

<div id="imageMapDiv" style="margin-left: 100px" runat="server"> 
             <img id="Image-Map" src="/Images/Map/FordTransitVanHighRoof.png" border="0" usemap="#image-maps" alt="" class="map" /> 
             <map name="image-maps" id="ImageMapping"> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="Roof" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="140,534,200,534,279,534,359,536,432,534,486,533,491,578,493,616,489,654,485,666,369,666,220,667,140,668,137,620,138,574" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="Windscreen" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="139,532,111,531,90,532,71,538,64,552,61,581,62,615,63,648,66,660,80,668,110,671,127,669,138,669,132,615,134,556" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="Bonnet" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="59,548,30,558,18,565,16,583,16,613,17,633,27,642,48,649,62,654,59,597,60,562" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="FB" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="553,172,572,172,595,175,602,178,629,178,672,177,688,173,718,172,716,186,715,198,709,205,702,211,678,210,636,211,589,211,573,211,563,208,556,200,554,186" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="RB" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="566,434,553,432,555,454,567,465,590,467,619,467,674,465,701,465,714,461,716,454,719,437,718,434,707,433,705,443,702,456,678,456,636,456,588,455,568,456,565,445" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSRG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="626,323,605,323,584,323,577,325,575,332,576,342,576,361,576,370,583,376,594,376,615,377,624,377,626,372,627,343" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSRG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="650,323,666,322,690,321,700,326,699,338,699,360,699,371,690,374,678,376,658,376,647,377,646,350,647,325" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSSG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="395,355,383,345,364,330,354,323,341,321,334,320,326,319,324,321,324,330,325,347,328,360,333,371,348,376,367,379,380,381,388,382,386,374,385,362,387,357,390,354" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSSG" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="116,110,111,108,117,101,128,94,140,83,154,75,165,74,177,72,182,76,180,101,177,109,172,120,156,127,134,130,124,131,118,131,116,126,116,116" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSM" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="536,107,531,118,532,134,540,137,548,137,556,139,559,127,559,120,559,113,559,109,554,110,555,121,552,122,549,122,548,112,548,109,542,108" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSM" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="723,108,736,106,741,119,741,128,738,134,730,137,720,137,716,140,713,134,713,119,713,110,715,112,716,121,718,124,719,120,720,111" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSQ" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="187,294,184,420,185,445,186,453,144,453,139,433,127,418,112,415,95,414,75,418,61,419,29,420,25,374,33,364,41,293" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="308,307,276,297,232,293,187,292,184,307,185,418,185,442,186,455,309,453" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="196,58,230,50,275,46,317,44,320,60,320,143,320,193,318,203,196,204" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSQ" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="189,292,273,297,309,306,310,368,308,428,308,453,186,453,185,364,186,309" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSRD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="637,277,695,279,703,281,710,344,711,383,707,389,707,432,637,432" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSFD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="406,358,367,325,330,313,311,310,311,371,310,424,309,441,309,455,376,454,382,427,395,417,404,412,410,390" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSH" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="712,133,702,138,690,139,682,143,682,151,688,157,695,157,713,154" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSH" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="590,143,568,136,561,134,558,154,580,157,588,153" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSFW" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="444,382,478,390,483,393,484,404,467,404,459,403,452,394" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSRD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="637,277,580,279,573,279,568,303,563,381,567,387,567,431,597,432,637,433" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="OSRL" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="721,383,715,383,707,388,707,432,719,433" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSRL" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="566,388,558,382,554,389,555,432,567,432" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSFD" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="195,61,196,170,196,190,196,204,128,205,119,176,109,166,101,165,96,140,99,108,124,88,143,71" target="_self" /> 
              <area OnClick="DamageControlModal_OnClick" alt="" title="NSFW" href="#" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="63,132,26,141,21,150,23,158,45,154,52,142" target="_self" /> 
             </map> 
            </div> 

당신의 RUNAT = "서버"가 필요합니다

protected void DamageControlModal_OnClick (object sender, EventArgs e) 
{ 
    modalDamageControl.ShowModal(); 
} 

Answer 1

나는 더럽지 만 빠른 해결책이 있습니다. 당신 div

<asp:Button ID="btnFake" runat="server" OnClick="btnFake_Click" style="display:none"/> 

이 가짜 버튼을 UI에 표시되지 않습니다

<script> 
function DamageControlModal_OnClick() { 
    $('#<%= btnFake.ClientID %>').click(); 
    return false; 
} 
</script> 

로 JQuery와 코드를 기록 아래

, 당신의 마크 업에 가짜 추가 버튼을 클릭합니다.

귀하의 area

청소하지만 긴 솔루션은 모든 서버 측 이벤트를 호출하지 않습니다 따라서 서버 컨트롤이 아닙니다. 서버 사이드 코드를 호출하려면 learn how to call web method from jquery을 사용하십시오.

Answer 2

C#을 공물과 ID = ""각 지역 태그에 대한 C# 기능을 트리거합니다.

<area runat="server" ID="Area1" ... />