jQuery函数.bind在IE中不起作用 [英] jQuery function .bind not working in IE

问题描述

这是我的网站

如果单击小缩略图，则会显示较大的图像.在Chrome浏览器中，它可以完美运行，但是当我在IE9中尝试时，它什么也没做.这是我的代码:

If you click on the little thumbnails a larger image displays. In Chrome it works perfectly, but when I try it in IE9 it just doesn't do anything. Here is my code:

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无法识别?或者，只要您单击它，就立即取消，就不会产生任何影响.

I am quite sure it is something to do with the binding onclick. Perhaps IE doesn't recognise it? Or just cancels out as soon as you click it giving the effect of nothing happening.

谢谢.

现在，由于Sparky，此问题已解决！

推荐答案

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

Convert your .bind() into .on() or downgrade your jQuery version. Your site is running jQuery 1.9 which has removed nearly all deprecated features. You could also include the migrate plugin.

此外，对于希望网站在Explorer中正常运行的任何希望，您必须首先验证HTML:

Also, for any hope of a site working properly in Explorer, you must first validate the HTML:

查看全文