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バインドを介してイベントをバインドすると動作しますが、resizecreate. イベントがイニシャライザーの一部として登録されないのはなぜなのか、何か不足しているのか、それとも構成の問題である可能性があるのか​​ 疑問に思っています。php/javascript エラーは表示されません。

関連する JQuery UI ドキュメント ページ

4

4 に答える 4

5

私はこの種の問題に出くわしました。bind イベントとイニシャライザ イベントは同じものではないようで、イニシャライザ イベントをトリガーすることはできません。たとえば、「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 イベントは、サイズ変更可能なウィジェットが作成されたときにのみ発生するため、ウィジェットを作成する前にバインドする必要があります。

次の例では、サイズ変更可能なウィジェットを定義し、2 つのアラートを発生させます。1 つはバインド定義から、もう 1 つはイニシャライザからです。

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' の警告ボックス)。

于 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 ) {}
});

イベント リスナーをサイズ変更イベントにバインドします。

$( ".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 に答える