JSFiddle - React, Tailwind, and code Playground

by davestein

HTML

<html>
    <body>
        Click the grey box and then the darker box. The expected results should be:<br />
<pre>
x=1
z=2
x=1
</pre><br />
Unforuntately, the saved event data of the second click overwrites the first.
        <div id="tester">
            
        </div>
        <div id="later-action">Give me the data</div>
        <textarea id="results"></textarea>
    </body>
</html>

CSS

#tester { width: 100px; height: 100px; background-color: #CCC; }
textarea { width: 100px; height: 200px; }
#later-action { display: none; width: 100px; height: 100px; background-color: #333; }

JavaScript

// function that runs on this element, for example
var firstFunc = function( e ) {

      write( e );
      
      var laterAction = function( e2 ) {
        write( e );
      };
      
      $('#later-action').show().bind( 'click', laterAction );
      
    },
    // function that is run on this element and others, for example
    secondFunc = function( e ) {
    
      write( e );
      
    },
    write = function( e ) {
      $('#results').val( $('#results').val() + "\r\n" + $.param( e.data ) );  
    };

$('#tester').bind( 'click', { x : 1 }, firstFunc )
            .bind( 'click', { z : 2 }, secondFunc );