jQuery函数.bind在IE中不起作用

Question

这是我的网站

如果单击小缩略图,则会显示较大的图像.在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

将您的jQuery版本转换.bind()为.on()或降级.您的网站正在运行jQuery 1.9,它已删除了几乎所有已弃用的功能.您还可以包含migrate插件.

此外,为了在Explorer中正常工作的任何希望,您必须首先验证HTML:

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