Обратные вызовы событий пользовательского интерфейса JQuery не запускаются при установке в инициализаторе

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.

Соответствующая страница документации по JQuery UI

Answer 1

Я наткнулся на этот тип проблемы сам. Кажется, что события связывания и события инициализатора - это не одно и то же, поймите, и вы не можете вызвать события инициализатора. Например, Binding to '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

Инициализировать изменяемый размер с указанным обратным вызовом изменения размера:

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

Привязать прослушиватель события к событию изменения размера:

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

Answer 4

Попробуйте live () или делегат () для всех ваших асинхронных привязок

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