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>

jquery没有工作ie

2 个答案: