функция JQuery не .bind работает в IE

Question

This is my website

Если нажать на маленьких миниатюр более крупное изображение отображает. В Chrome он работает отлично, но когда я пытаюсь это сделать в IE9, он просто ничего не делает. Вот мой код:

JQuery

// JavaScript Document 

//Button1 
;(function($) { 

     // DOM Ready 
     $(function() { 

      // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button').bind('click', function(e) { 

       // Prevents the default action to be triggered. 
       e.preventDefault(); 

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up').bPopup({ 
        appendTo: 'form' 
        , zIndex: 2 
        , modalClose: false 
       }); 
      }); 
     }); 
    })(jQuery); 
//Button2 



    ;(function($) { 

     // DOM Ready 
     $(function() { 

      // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button1').bind('click', function(e) { 

       // Prevents the default action to be triggered. 
       e.preventDefault(); 

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up1').bPopup({ 
        appendTo: 'form' 
        , zIndex: 2 
        , modalClose: true 
       }); 
      }); 
     }); 
    })(jQuery); 


    ;(function($) { 
//Button3 


     // DOM Ready 
     $(function() { 

      // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button2').bind('click', function(e) { 

       // Prevents the default action to be triggered. 
       e.preventDefault(); 

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up2').bPopup({ 
        appendTo: 'form' 
        , zIndex: 2 
        , modalClose: false 
       }); 
      }); 
     }); 
    })(jQuery); 

И мой HTML

<!-- Portfolio Popup Box --> 

    <div id="element_to_pop_up"> 
      <a class="bClose">x<a/> 
      <img src="imgs/portfolio/bobbie.png" width="100%" height="100%" alt="Bobbie Gordon Website" /> 
    </div> 

    <div id="element_to_pop_up1"> 
      <a class="bClose">x<a/> 
      <img src="imgs/portfolio/jareth.png" width="100%" height="100%" alt="Bobbie Gordon Website" /> 
    </div> 

    <div id="element_to_pop_up2"> 
      <a class="bClose">x<a/> 
    </div> 

<!-- Portfolio Popup Box End --> 

CSS

#element_to_pop_up { 
    padding:5px; 
    color:#000; 
    display:none; 
    width:90%; 
    height: 100%; 
    position:absolute; 
    border:1px solid #000; 
} 
#element_to_pop_up1 { 
    padding:5px; 
    color:#000; 
    display:none; 
    width:90%; 
    height: 90%; 
    position:absolute; 
} 
#element_to_pop_up2 { 
    padding:5px; 
    color:#000; 
    display:none; 
    width:90%; 
    height: 90%; 
    position:absolute; 
} 

.bClose{ 
    cursor:pointer; 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    font-size:22px; 
    font-weight:bold; 
} 

Я совершенно уверен, что это что-то делать с обязательным OnClick. Возможно, IE не узнает об этом? Или просто отменяется, как только вы нажимаете на него, давая эффект ничего не происходит.

Спасибо всем.

Это исправлено благодаря Sparky!

Answer 1

Преобразуйте .bind() в .on() или понизите версию jQuery. Ваш сайт работает jQuery 1.9 which has removed nearly all deprecated features. Вы также можете включить migrate plugin.

Кроме того, для какой-либо надежды на разработке сайта правильно в проводнике, вы должны сначала проверить HTML:

http://validator.w3.org/check?uri=http%3A%2F%2Fjohns-webdesign.com%2Fport.html&charset=%28detect+automatically%29&doctype=Inline&group=0