Question

我有以下代码和小提琴（http://jsfiddle.net/sunnyday195/VMDyL/1/），我需要使用最新版本的jquery，当然不支持.live。当我去使用.on突出显示不起作用。这是js代码：

 $("#input-service_date_leave, #input-service_date_return").datepicker({
    rangeSelect: true,
    beforeShow: customRange,
    onSelect: customRange,
});

function customRange(input) {
    if (input.id == "input-service_date_leave") {

        $("#ui-datepicker-div td").off();

        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
    if (input.id == "input-service_date_return") {

        $("#ui-datepicker-div td").on({
            mouseenter: function() {
                $(this).parent().addClass("finalRow");
                $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
           },
            mouseleave: function() {
                $(this).parent().removeClass("finalRow");
                $("#ui-datepicker-div td").removeClass("highlight");
            }
        });

        var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
}

Answer 1

有mouseenter http://api.jquery.com/mouseenter/和mouseleave http://api.jquery.com/mouseleave/事件。

所以，这应该适合你（未经测试）：

$("#input-service_date_leave, #input-service_date_return").datepicker({
                                                                         rangeSelect: true,
                                                                         beforeShow: customRange,
                                                                         onSelect: customRange
});

function customRange(input)
{
    if (input.id == "input-service_date_leave")
    {

       $("#ui-datepicker-div td").off();

       if (selectedDate != null)
       {
           $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
       }
    }
    if (input.id == "input-service_date_return")
    {

       $("#ui-datepicker-div td").mouseenter(function ()
                                             {
                                                $(this).parent().addClass("finalRow");
                                                $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                                                $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                                             }
                                 );
       $("#ui-datepicker-div td").mouseleave(function ()
                                            {
                                                $(this).parent().removeClass("finalRow");
                                                $("#ui-datepicker-div td").removeClass("highlight");
                                            }
                                 );

    var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
    if (selectedDate != null)
    {
        $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
    }
}

Answer 2

想通了。使用这样的东西：

 $(document).on("mouseenter.td","#ui-datepicker-div tr", function() {
                       //code here
                        });

在ui datepicker中从.live转换后，jquery .on无法正常工作

2 个答案: