从 .live 在 ui datepicker 中转换后 jquery .on 不工作答案

【问题标题】：jquery .on not working after converting from .live in ui datepicker从 .live 在 ui datepicker 中转换后 jquery .on 不工作
【发布时间】：2013-10-24 00:33:02
【问题描述】：

我有以下代码和小提琴 (http://jsfiddle.net/sunnyday195/VMDyL/1/)，我需要使用当然不支持 .live 的最新版本的 jquery。当我去使用 .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');
        }
    }
}

【问题讨论】：

你在哪里尝试使用.on()？
对不起，我把它放在那里了。我现在已经更新了。

标签： javascript jquery css jquery-ui datepicker

【解决方案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');
    }
}

【讨论】：

似乎根本没有触发任何鼠标事件，我尝试了单击悬停等。
尝试使用 $(element).datepicker().mouseenter(...)。我认为这是因为该元素不是日期选择器。
我很惊讶将事件处理程序附加到这个 ui 片段有多么复杂。我原以为这些东西是内置的。

【解决方案2】：

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

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

【讨论】：