JQuery UI event callbacks not triggering when set

问题:

I have the following code

$(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");
    });
    */
});

as a drupal theme template, when I set the event callbacks in the initializer they do not get triggered however when I bind the event resize via bind it works, however not for resizecreate. I'm wondering why the events aren't registering as part of the intializer, is there something I'm missing or could it be some configuration issue. I don't receive any php/javascript errors.

Relevant JQuery UI Documentation Page

回答1:

I have stumbled upon this type of problem myself. It seems that the bind events and the initializer events are not the same thing, go figure, and you cannot trigger the initializer events. For instance, Binding to 'resizecreate' should work, but will not be the same function as you defined in the 'create' function of the initializer.

Try defining your events like so:

//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 should be able to trigger these events like:

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

Also note that the callbacks will fire when you operate the widget (i.e. resizing the container) as normal when defining the event callbacks with the bind method.

EDIT: Ok, I think I solved it, or at least this worked for me. Since the resizecreate event only fires when the resizeable widget is created, you must bind to it before you create the widget.

The following example defines a resizeable widget and will fire two alerts: one from the bind definition, one from the initializer.

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');
        }
    });
});

Also note, calling $('#resizable').trigger('resizecreate'); will fire the callback provided to the bind function as noted before (in this case, an alert box with 'BIND').

回答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')
                },
            });

回答3:

Try live() or delegate() for all your asynchronous binds

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

回答4:

Initialize the resizable with the resize callback specified:

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

Bind an event listener to the resize event:

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

More info : http://api.jqueryui.com/resizable/

Example for custom event :

var element;
element.resizable({
    'resize' : function() {
        element.trigger('myevent');
    }
});

$('.elementselector').bind('myevent', function() {
    alert('Custom Event');
});