jQueryUI日期选择器的“create”事件不起作用。

Question

在我的项目中，使用了jQueryUI的日期选择器插件，但是在这段代码中，“create”事件从未触发。您可以在官方网站上查看文档：

http://jqueryui.com/demos/datepicker

在“选项”标签中。

$('#datepicker').datepicker({
    create: function(event, ui) {
        alert("ppp");
    }
});

- Rupert

Answer 1

文档有误（正如Nick所指出的那样）。如果你查看源代码中的jquery.ui.widget.js，你会看到这个：

$.Widget.prototype = {
    // ...
    _createWidget: function( options, element ) {
        // ...
        this._trigger( "create" );
        this._init();
    },

因此，创建事件通过jQuery-UI小部件工厂处理，因此所有小部件应该支持它。如果您查看jquery.ui.button.js，您将看到小部件工厂在使用中：

$.widget( "ui.button", {
    options: {
        //...

你会发现按钮小部件确实会触发create事件。如果您查看jquery.ui.datepicker.js，您不会找到任何$.widget，但您会发现一个提醒，当日期选择器转换为小部件工厂时需要完成某些事情：

// TODO rename to "widget" when switching to widget factory
_widgetDatepicker: function() {
    return this.dpDiv;
},

日期选择器没有使用小部件工厂，并且它本身没有实现创建事件。不过，beforeShow事件是有效的，因此您可以尝试使用它。以下是一个快速示例（请打开您的控制台）：http://jsfiddle.net/ambiguous/kn3hq/

- mu is too short

---

令我惊讶的是，文档是错误的，所以我会寻找其他方法来完成我的项目，谢谢！ - Rupert

@Rupert：你可以尝试一下Nick找到的github版本（https://github.com/kbwood/jquery-ui），但我不知道它有多稳定。 - mu is too short

Answer 2

我认为有一个关于这个问题的未解决工单。

http://bugs.jqueryui.com/ticket/6935

- Nick

---

+1 是为了找到（令人失望的老）错误。根本问题在于日期选择器没有使用小部件工厂，而创建事件来自小部件工厂。 - mu is too short

我知道这个 bug 是因为我以前遇到过同样的问题。我曾经认为有一些修复代码在流传，但实际上是针对一个非常旧的版本 jQuery（1.4 iirc），所以我觉得没必要费力去找它。 - Nick

已经足够接近了。日期选择器看起来像是被强行加入 jQuery-UI 的，也许正在进行的重写工作会解决它。 - mu is too short

这个应该会触发“create”事件，因为它使用了小部件工厂。你有没有想法它有多稳定，或者它是否正在积极开发中？看起来自2010年春季以来就没有什么变化了。 - mu is too short

Answer 3

您可以使用临时解决方案，通过在“主页面”中使用“DOM插入事件”来捕获日期选择器的创建：

$(document).bind('DOMNodeInserted', function (event) {

    //  If is a datepicker element
    if ($(event.target).hasClass('ui-datepicker-calendar')) {         

        //  Check only new elements
        $('.hasDatepicker:not(.controlClass)').each(function (i, obj) {

            //  Add class for avoid current obj in next datepicker creation
            $(obj).addClass("controlClass");

            //  Do what you want with $(obj)

        });
    }
});

- Dani