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

【问题标题】：jQuery function .bind not working in IEjQuery 函数 .bind 在 IE 中不起作用
【发布时间】：2013-02-13 18:03:25
【问题描述】：

如果您单击小缩略图，则会显示较大的图像。在 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，此问题现已得到修复！

【问题讨论】：

您应该按照自己的注释进行操作：// From jQuery v.1.7.0 use .on() instead of .bind()。您的页面使用的是 jQuery 1.9。
如果希望网站在 Explorer 中正常运行，您必须首先验证 HTML：validator.w3.org/…
天哪，真是太神奇了，没有睡眠让你......谢谢：/
使用可以正常工作的迁移插件。虽然最好将bind 转换为on。

标签： jquery html jquery-ui bpopup

【解决方案1】：

将您的.bind() 转换为.on() 或降级您的jQuery 版本。您的网站正在运行jQuery 1.9 which has removed nearly all deprecated features。您还可以包含migrate plugin。

此外，如果希望网站在 Explorer 中正常运行，您必须首先验证 HTML：

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

【讨论】：