자바 스크립트에서 명령 단추를 할당합니다.

Question

자바 스크립트에서 단추를 클릭하는 것을 모방하려고합니다. 버튼을 클릭 할 수 있습니다.이 단추는 작동하며 내 모달 방법을 엽니 다.하지만 통과하려고합니다. 명령 인수뿐만 아니라 ID를 통해

그래서 함수에 전달 된 내 ID 인 명령 인수를 btn으로 지정하려고합니다.

도움이나 아이디어 부탁드립니다.

자바 스크립트

<script type="text/javascript"> 
    function DamageControlModal(ID) { 
     var val = ID 
     //alert(val) 
     $('#<%= btnFake.ClientID %>').click(); 
    } 
</script> 

는 HTML 가능한 해결 방법은 btnFake에 클릭 된 ID를 넣어하는 것입니다

<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" runat="server"> 
              <area id="Roof" onclick="DamageControlModal(this.id);" title="Roof" 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 id="Windscreen" onclick="DamageControlModal(this.id);" title="Windscreen" 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 id="Bonnet" onclick="DamageControlModal(this.id);" title="Bonnet" 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 id="FB" onclick="DamageControlModal(this.id);" title="FB" 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 id="RB" onclick="DamageControlModal(this.id);" title="RB" 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 id="NSRG" onclick="DamageControlModal(this.id);" title="NSRG" 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 id="OSRG" onclick="DamageControlModal(this.id);" title="OSRG" 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 id="OSSG" onclick="DamageControlModal(this.id);" title="OSSG" 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 id="NSSG" onclick="DamageControlModal(this.id);" title="NSSG" 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 id="OSM" onclick="DamageControlModal(this.id);" title="OSM" 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 id="NSM" onclick="DamageControlModal(this.id);" title="NSM" 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 id="OSQ" onclick="DamageControlModal(this.id);" title="OSQ" 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 id="OSD" onclick="DamageControlModal(this.id);" title="OSD" 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 id="NSD" onclick="DamageControlModal(this.id);" title="NSD" 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 id="NSQ" onclick="DamageControlModal(this.id);" title="NSQ" 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 id="OSRD" onclick="DamageControlModal(this.id);" title="OSRD" 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 id="OSFD" onclick="DamageControlModal(this.id);" title="OSFD" 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 id="NSH" onclick="DamageControlModal(this.id);" title="NSH" 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 id="OSH" onclick="DamageControlModal(this.id);" title="OSH" 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 id="OSFW" onclick="DamageControlModal(this.id);" title="OSFW" 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 id="NSRD" onclick="DamageControlModal(this.id);" title="NSRD" 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 id="OSRL" onclick="DamageControlModal(this.id);" title="OSRL" 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 id="NSRL" onclick="DamageControlModal(this.id);" title="NSRL" 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 id="NSFD" onclick="DamageControlModal(this.id);" title="NSFD" 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 id="NSFW" onclick="DamageControlModal(this.id);" title="NSFW" 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> 
             <asp:Button ID="btnFake" runat="server" OnCommand="DamageControlModal_OnClick" Style="display: none" /> 
            </div> 

Answer 1

태그를 사용하여 포스트 백 후에 코드의 값을 원하게 만듭니다. 그렇다면 가장 쉬운 해결책은 HiddenField에 값을 넣은 다음 단추를 누른 후 string s = HiddenField1.Value; 코드 숨김으로 사용할 수 있습니다.

<asp:HiddenField ID="HiddenField1" runat="server" /> 

<script type="text/javascript"> 
    function DamageControlModal(ID) { 
     $('#<%= HiddenField1.ClientID %>').val(ID); 
     $('#<%= btnFake.ClientID %>').click(); 
    } 
</script> 

Answer 2

는 Y에 그런

<script type="text/javascript"> 
    function DamageControlModal(ID) { 
     $('#<%= btnFake.ClientID %>').data('value', ID); 
     $('#<%= btnFake.ClientID %>').click(); 
    } 
</script> 

속성 우리의 모달 방법은 방금 값을 가져옵니다 : $('#btnFake').data('value')

그러나이 논리는 이상합니다. 왜 영역을 클릭하여 모달을 직접 열지 못합니까? 이 같은

:

$('#ImageMapping area').click(function(e){ 
    var id = e.target.id; 
    modalmethod(id); 
}); 

Answer 3

당신은 쉽게 HTML 대신 인라인에서 별도로 클릭 이벤트를 설정 찾을 수 있습니다.

이 작동합니다 : DamageControl에서

$('#ImageMapping area').click(function(){ 

echo('Clicked Area ID: '+this.id); 
DamageControlModal(this.id); 

}); 

:

function DamageControlModal(ID) { 
     //alert(val) 
     $('#'+ID).click(); //to click a button with id = ID 
     $('#btnFake').click(); //to click the button in your html 
} 

목록을 기반으로 예와

참조 JS 바이올린 : 나는 때문에 당신의 asp.net의 가정 https://jsfiddle.net/cew9omx1/