JQuery UI事件回调在初始化器中设置时不触发

Question

我有以下代码

$(document).ready(function() {
    $('#content_reservation-fullCalendar').fullCalendar({
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
        },
        events: <?php echo($event_list); ?>
    });
    $("#content_reservation-fullCalendar").resizable({
        handles: 'e',
        create:
            function(event, ui){
                $('#content_reservation-fullCalendar').fullCalendar("render");
                console.log("fullCalendar resize intialized");
            },
        resize:
            function(event, ui) {
                $('#content_reservation-fullCalendar').fullCalendar("render");
                console.log("fullCalendar resize callback triggered");
            }
    });
    /*
    $("#content_reservation-fullCalendar").bind("resize", function(event, ui) {
        $('#content_reservation-fullCalendar').fullCalendar("render");
    });
    */
});

作为一个drupal主题模板，当我在初始化器中设置事件回调时，它们不会被触发，但是当我通过bind绑定事件resize时，它会工作，但resizecreate不会。我想知道为什么事件没有注册为初始化器的一部分，是我错过了什么，还是可能是一些配置问题。我没有收到任何php/javascript错误。

相关JQuery UI文档页

Answer 1

我自己就碰到过这种问题。绑定事件和初始化事件似乎不是一回事，你不能触发初始化事件。例如，绑定到' resizecrecreate '应该可以工作，但与你在初始化器的'create'函数中定义的函数不同。

试着这样定义你的事件:

//This should define all your events
$('.selector').resizeable().bind({
    resizecreate : function(event,ui) {...},
    resizestart : function(event,ui) {...},
    resize : function(event,ui) {...},
    resizestop : function(event,ui) {...},
});

您应该能够触发这些事件，如:

//You can trigger the events by doing:
$('.selector').trigger('resizecreate');
$('.selector').trigger('resizestart');
$('.selector').trigger('resize');
$('.selector').trigger('resizestop');

还请注意，当使用bind方法定义事件回调时，当您像正常操作小部件(即调整容器大小)时，回调将触发。

EDIT:好的，我想我解决了它，或者至少这对我有用。由于resizcreate事件仅在创建可调整大小的小部件时触发，因此必须在创建小部件之前绑定它。

下面的例子定义了一个可调整大小的小部件，并将触发两个警报:一个来自绑定定义，一个来自初始化器。

HTML

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>

JavaScript

$(function() {
    $( "#resizable" ).bind('resizecreate',function() {
        alert('BIND');      
    }).resizable({
        'create' : function() {
                alert('INITIALIZER');
        }
    });
});

还请注意，调用$('#resizable').trigger('resizecreate');将触发提供给bind函数的回调，如前所述(在本例中，是一个带有' bind '的警告框)。

Answer 2

  $('.sidebox').resizable().bind({
                resizecreate: function(event, ui) {
                    console.log('C')
                },
                resizestart: function(event, ui) {
                    console.log('RS')
                },
                resize: function(event, ui) {
                    console.log('R')
                },
                resizestop: function(event, ui) {
                    console.log('RST')
                },
            });

Answer 3

为所有异步绑定尝试live()或delegate()

$("#content_reservation-fullCalendar").live("resize", function(event, ui) {
        $('#content_reservation-fullCalendar').fullCalendar("render");
});

Answer 4

使用指定的resize回调初始化可调整大小:

$( ".selector" ).resizable({
  resize: function( event, ui ) {}
});

将事件监听器绑定到resize事件:

$( ".selector" ).on( "resize", function( event, ui ) {} );

更多信息:http://api.jqueryui.com/resizable/

自定义事件示例:

var element;
element.resizable({
    'resize' : function() {
        element.trigger('myevent');
    }
});
$('.elementselector').bind('myevent', function() {
    alert('Custom Event');
});