IE에서 Jquery 이미지 클릭이 작동하지 않습니다.

Question

HI 내 프로젝트에서 팝업 이미지가 있습니다. 사용자가 이미지의 왼쪽 부분을 클릭하면 사용자 이 page1.aspx로 리디렉션됩니다. 사용자가 이미지의 오른쪽 부분을 클릭하면 페이지는 사용자를 page2.aspx로 리디렉션합니다. 나는 이것을 위해 JQuery를 사용했으며, fire fox에서는 이 유효합니다. 하지만 그것은 IE에서 작동하지 않습니다. 이유가 무엇 일 수 있습니다. 어떤 도움을 주시면 감사하겠습니다.

덕분에 여기

코드

<script type="text/javascript"> 
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf"); 
/* jQuery Nonsense */ 
$(document).ready(function() 
{ 
    //!\: Slider nav thingy. 
    $("#link_one").click(function() 
    { 
     var aWidth = $(this).width(); 
     if($(this).hasClass("closed")) 
     { 
      $(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"}); 
      if($("#link_two").hasClass("open")) 
      { 
       var bWidth = $("#link_two").width(); 
       $("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"}); 
       $("#link_two a").hide(); 
      } 
      $("a", this).show(); 
     } 
     else 
     { 
      $("a", this).hide(); 
      $(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"}); 
     } 
    }); 
    $("#link_two").click(function() 
    { 
     var aWidth = $(this).width(); 
     if($(this).hasClass("closed")) 
     { 
      $(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"}); 
      if($("#link_one").hasClass("open")) 
      { 
       var bWidth = $("#link_one").width(); 
       $("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"}); 
       $("#link_one a").hide(); 
      } 
      $("a", this).show(); 
     } 
     else 
     { 
      $("a", this).hide(); 
      $(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"}); 
     } 
    }); 
    //!\: This could all be achieved with CSS. 
    $(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff"); 
    $(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff"); 
    $(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff"); 
    $(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff"); 
}); 
</script> 

<!-- Main Content Container --> 
    <div id="mainContentContainer"> 

     <!-- Top Link Slider --> 
     <div id="headerContainer" class="printHide"> 
      <div id="headerLinkContainer"> 
       <div id="banner_container"> 
       <div id="link_one" class="sub closed"> 
      <img class="major" src="images/patient_info.gif" border="0" /> 
      <img class="minor" src="images/sub_nav.gif" border="0" /> 
      <a href="http://www.mysite.com/files/products/uspi_nicotrol_inhaler.pdf" class="inhaler" rel="external" target="_blank"><!-- --></a> 
      <a href="http://www.mysite.com/files/products/uspi_nicotrol.pdf" class="ns" rel="external" target="_blank"><!-- --></a> 
     </div> 
       <div id="link_two" class="sub closed"> 
      <img class="major" src="images/prescribe_info.gif" border="0" /> 
      <img class="minor" src="images/sub_nav.gif" border="0" /> 
      <a href="http://www.mysite.com/files/products/uspi_nicotrol_inhaler.pdf" class="inhaler" rel="external" target="_blank"><!-- --></a> 
      <a href="http://www.mysite.com/files/products/uspi_nicotrol.pdf" class="ns" rel="external" target="_blank"><!-- --></a> 
     </div> 
       <div id="link_three" class="open"><a href="#ISIContainer"><img src="images/isi.gif" border="0" /></a></div> 
       </div>    
      </div> 

     </div> 

Answer 1

당신이 imagemap를 사용하여 시도 적이있다? 그렇게하면 IE를 포함한 거의 모든 브라우저에서 지원됩니다.

원한다면 <area> 태그의 click() 이벤트를 캡처 할 수도 있습니다.

편집 : 귀하의 사이트를 보면 확장형 div 기능을 .sub div가 아닌 .major 이미지에 바인딩 할 수 있습니다. .sub 사업부가 IE에서 클릭 이벤트를 가로 채고 같은

그것은 보이지만 표준을 준수하는 브라우저는 .minor 그림이 .sub 사업부 '위'렌더링해야 함을 이해합니다.