我如何将 .Live() jQuery 函数与 Jquery UI datepicker 一起使用？答案

【问题标题】：How I use .Live() jQuery function with Jquery UI datepicker?我如何将 .Live() jQuery 函数与 Jquery UI datepicker 一起使用？
【发布时间】：2011-03-26 19:32:17
【问题描述】：

我有一个日期选择器（本地化为西班牙语）：

$(document).ready(function () {
    $("#datepicker").datepicker(
        { dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',
                'Junio', 'Julio', 'Agosto', 'Septiembre',
                'Octubre', 'Noviembre', 'Diciembre'],
            monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr',
                'May', 'Jun', 'Jul', 'Ago',
                'Sep', 'Oct', 'Nov', 'Dic'],
            onSelect: function (dateText, inst) {
                var form = $(form);
                $.ajax({
                    url: "/Trabajo/",
                    type: "POST",
                    data: { dia: dateText },
                    success: function (result) {
                        $('#trabajos').replaceWith($('#trabajos', $(result)));
                    }
                });
                return false;
            }
        });
});

它工作得很好，它用新信息更新了#trabajos div，但 dom 没有更新。我知道 .live() 就是为了这个，但是，作为 jquery noobish，我如何更改此代码以实现实时功能？

谢谢。

PS：如果有asp.net mvc的家伙，如果我的表格是这样的：

@using (Ajax.BeginForm("/Trabajo/", new AjaxOptions { UpdateTargetId = "trabajos" }))

为什么我必须在成功函数上手动更新它？

【问题讨论】：

标签： dom asp.net-mvc-3 jquery jquery-ui-datepicker

【解决方案1】：

试试这样：

$(document).ready(function () {
    attachDatePicker();
});

function attachDatePicker() {
    $('#datepicker').datepicker({ 
        dateFormat: 'dd/mm/yy',
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        onSelect: function (dateText, inst) {
            var form = $(form);
            $.ajax({
                url: '/Trabajo/',
                type: "POST",
                data: { dia: dateText },
                success: function (result) {
                    $('#trabajos').replaceWith($('#trabajos', $(result)));
                    // reattach the datepicker if you updated 
                    // the corresponding DOM element
                    attachDatePicker();
                }
            });
            return false;
        }
    });
}

备注：永远不要像在 AJAX 调用的 url 属性中那样在 javascript 文件中对 url 进行硬编码。总是 URL 助手。所以而不是：

url: '/Trabajo/'

使用：

url: '@Url.Action("Index", "Trabajo")'
                     ^         ^
                  action    controller

【讨论】：

谢谢，但是不工作，页面更新但DOM没有，另一方面，现在在页面中，我必须多次单击鼠标右键才能显示上下文菜单，很奇怪。
@Jesus Rodriguez，the page updates but the DOM doesn't 是什么意思？您是否收到 javascript 错误？
@Darin Dimitrov 页面显示更改，但 DOM 未更新。一个错误，就是这样：“element.getAttribute is not a function” inside ajax unobtrusive.js。
@Jesus Rodriguez，这与您的Ajax.BeginForm 助手有关吗？如果是这样，请不要使用Ajax.BeginForm，因为它可能会搞砸。尝试使用普通的Html.BeginForm。
我改了，但还是一样。我想我需要 jquery 的 live 方法，但我不知道如何在我的代码中使用它。