Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
  ( function( $, undefined ) {
    $.widget( "foo.barwidget", {
      widgetEventPrefix: "baz",
​
      _create: function() {
        this.element.css( { background: "red" } );
        this._on( this.element, {
          click: "_handleClick"
        });
      },
​
      _handleClick: function( e ) {
        this._trigger( "event" );
      }
    });
​
    // Uncomment below to illustrate bug
    //$.widget( "foo.barwidget", $.foo.barwidget, {
    //  _extensionMethod: function() {
    //    alert( "Blah!" );
    //  }
    //});
    
    // Additionally, uncomment below to illustrate workaround
    //$.widget( "foo.barwidget", $.foo.barwidget, {
    //  widgetEventPrefix: "baz"
    //});
​
    $( document ).ready( function() {
      $( "#theDiv" )
        .on( "bazevent", function( e ) {
          alert( "bazevent" );
        })
        .barwidget()
    });
  })( jQuery );
</script>
<style>
  #theDiv {
    width: 300px;
    height: 200px;
  }
</style>
</head>
<body>
  Clicking on the red rectangle should produce an alert containing the string "bazevent".
  <div id="theDiv"></div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers