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主题模板，当我在初始化程序中设置事件回调时，它们不会被触发，但是当我通过绑定绑定事件resize时，它可以工作，但不适用于resizecreate。我想知道为什么这些事件没有作为初始化程序的一部分进行注册，是否有一些我缺少的东西或者它可能是一些配置问题。我没有收到任何php / javascript错误。

Relevant JQuery UI Documentation Page

Answer 1

我自己偶然发现了这类问题。似乎绑定事件和初始化器事件不是一回事，如图所示，并且您无法触发初始化器事件。例如，绑定到'resizecreate'应该有效，但与初始化程序的'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方法定义事件回调时，在正常操作窗口小部件（即调整容器大小）时会触发回调。

编辑：好的，我想我已经解决了，或者至少这对我有用。由于resizecreate事件仅在创建可调整大小的窗口小部件时触发，因此必须在创建窗口小部件之前绑定它。

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

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'的警告框）。

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回调初始化resizable：

$( ".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');
});

在初始化程序中设置时，JQuery UI事件回调不会触发

4 个答案: