4

イベントをトリガーするjqueryプラグインを作成しました：

$.fn.myplugin = function(options) {
    this.on("foo.myplugin", options.foo);
    this.on("bar.myplugin", options.bar);
};

foo がユーザーによってキャンセルされたかどうかを確認し、bar がトリガーされないようにしたい:

// trigger foo
this.trigger("foo.myplugin");

// how do I check if foo was canceled
if( !fooCanceled ) {
    this.trigger("bar.myplugin");
}

bar がトリガーされないようにするために foo がキャンセルされたかどうかを確認するにはどうすればよいですか?

jQuery UI はこれと同様のことを行いますが、試してみるとうまくいきませんでした:

if (this._trigger("search", event) === false) {
    return;
}

私はこれに似たものを試しました：

if( this.trigger("foo.myplugin") === false ) {
    return;
}

this.trigger("bar.myplugin");

しかし、バーはまだトリガーされていました。

次のようにプラグインを初期化しています。

$("#asdf").myplugin({
    foo: function(event) {
        // cancel the event
        event.preventDefault();
    },

    bar: function(event) {
        console.log("should not be triggered");
    }
});
4

1 に答える 1

4

このパターンに従うことで、目的を達成できる可能性があります。

例: http://jsfiddle.net/VzzLf/3/

JS

//Plugin structure from : http://docs.jquery.com/Plugins/Authoring
(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
           var ele = $(this); 

           ele.on('click.myPlugin', function(e){

               //Hold a reference to the event
               var event = $.Event("closing")

               //Trigger it on the element
               ele.trigger(event); 

               //Check to see if it was disabled
               if(!event.isDefaultPrevented()){
                   ele.trigger('close');
               }

           }); 

       });

     }
  };

  $.fn.myPlugin = function( method ) {

    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' );
    }    

  };

})( jQuery );

  $(function(){
      $('#myPlugin')
          .myPlugin()
          .on('closing', function(){
            alert('closing');      
          })
          .on('close', function(){
            alert('close fired');      
          });   
      $('#myPluginDisabled')
          .myPlugin()
          .on('closing', function(e){
              alert('Disable close'); 
              e.preventDefault(); 
          })
          .on('close', function(e){
              alert('Will never get here'); 
          });      
  }); 
​

HTML

<div id='myPlugin'>Click me I'm enabled</div>

<div id='myPluginDisabled'>Click me I'm disabled</div>​
于 2012-12-18T20:24:20.763 に答える