jQuery function .bind not working in IE

问题

This is my website

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);

And my 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;
}

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.

Thanks all.

This is now fixed thanks to Sparky!

回答1:

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.

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

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

来源：https://stackoverflow.com/questions/14860018/jquery-function-bind-not-working-in-ie