jquery - jquery 不适用于 ie

Question

以下代码适用于 Chrome、Firefox 和 Safari，但不适用于 IE9。有人有什么主意吗？

代码的工作方式是： 当鼠标悬停在#calendar 上时，'.day' 将是可点击的。如果鼠标悬停在“.day”背景上，它也会改变颜色。单击“.day”后，将弹出一个 jquery-ui 对话框以获取一个值。

在 IE9中：“.day”不可点击。当鼠标悬停在“.day”背景颜色上时，它也不会改变。什么都没发生。

$(document).ready(function() {

    $('#calendar').mouseout(function() {
    $('#calendar .calendar .day').unbind('click');
});


$('#calendar').mouseover(function() {       
    $('#calendar .calendar .day').bind('click', function(){
        day_num = $(this).find('.day_num').html();
        $('#dialog-form').dialog("open");
    });
}); 


$(function() {  

    $('#dialog-form')
        .attr('title', 'Number')
        .dialog({ 
            autoOpen: false,
            closeOnEscape: true, 
            draggable: false, 
            resizable: false,
            height: 180,
            width: 450,
            show: 'fade', 
            modal: true, 
            buttons: { 
                'Ok': function() {
                    var spinner = $("#spinner").spinner();
                    day_data = (spinner.spinner( "value" ) );

                    if(day_data !=null){

                        $.ajax({
                            url: window.location,
                            type: 'POST',
                            data: {
                                day: day_num,
                                data: day_data
                            },
                            success: function(msg){
                                location.reload();
                            }
                        }).error (function() {
                            alert('an error occured');
                        });     
                    }
                },

                Cancel: function() {
                        $(this).dialog("close");
                }
            }

        });
}

Answer 1

看起来#calendar1应该只是#calendar。

虽然，我可以建议简化事件处理吗？

$("#calendar").on("click",function(evt) {
    day_num = $(evt.target).closest(".day").find(".day_num").html();
    $("#dialog-form").dialog("open");
});

这就是你所需要的。没有那些过于复杂mouseover/的mouseout东西。

Answer 2

试试这个，希望它对你有用

$('#calendar').mouseover(function() {       
        $('#calendar1 .calendar .day').bind('click', function(){
            day_num = $(this).find('.day_num').html();
            $('#dialog-form').dialog("open");
        });
    }); 

上面的代码需要在文档中准备好

<script type="text/javascript">

$(document).ready(function() {

    $('#calendar').mouseout(function() {
        $('#calendar .calendar .day').unbind('click');
    });


    $('#calendar').mouseover(function() {       
        $('#calendar1 .calendar .day').bind('click', function(){
            day_num = $(this).find('.day_num').html();
            $('#dialog-form').dialog("open");
        });
    }); 

});

$(function() {  

    $('#dialog-form')
        .attr('title', 'Number')
        .dialog({ 
            autoOpen: false,
            closeOnEscape: true, 
            draggable: false, 
            resizable: false,
            height: 180,
            width: 450,
            show: 'fade', 
            modal: true, 
            buttons: { 
                'Ok': function() {
                    var spinner = $("#spinner").spinner();
                    day_data = (spinner.spinner( "value" ) );

                    if(day_data !=null){

                        $.ajax({
                            url: window.location,
                            type: 'POST',
                            data: {
                                day: day_num,
                                data: day_data
                            },
                            success: function(msg){
                                location.reload();
                            }
                        }).error (function() {
                            alert('an error occured');
                        });     
                    }
                },

                Cancel: function() {
                        $(this).dialog("close");
                }
            }

        });
});

</script>