2

我有以下代码

$(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通过 bind 绑定事件时它可以工作，但对于resizecreate. 我想知道为什么这些事件没有注册为初始化程序的一部分，是我遗漏了什么还是可能是一些配置问题。我没有收到任何 php/javascript 错误。

相关 JQuery UI 文档页面

4

4 回答 4

5

我自己也偶然发现了这类问题。看来绑定事件和初始化事件不是一回事，看图，你不能触发初始化事件。例如，绑定到“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”的警报框）。

于 2011-07-07T15:51:30.743 回答
1 
  $('.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')
                },
            });
于 2014-04-14T10:23:29.383 回答
0

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

$("#content_reservation-fullCalendar").live("resize", function(event, ui) {
        $('#content_reservation-fullCalendar').fullCalendar("render");
});
于 2011-07-08T13:58:28.327 回答
0

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

$( ".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');
});
于 2013-06-24T14:20:09.633 回答