JSFiddle - React, Tailwind, and code Playground

by drzaus

HTML

<input type="text" id="text" name="title" placeholder="Type, then leave input" />

<button id="act">
Do Something
</button>

<button id="act2">
Do Something Else
</button>

<pre id="debug"></pre>

JavaScript

(function($) {
var $debug = $('#debug');
function log(message) {
	$debug.text($debug.text() + "\r\n" + message);
  console.log(message);
}

// you can even bind the same callback to 'regular' and 'custom' action
function onchangeCallback(e) {
		//debugger;
    log(e.type + ': ' + $(this).val());
}

// helper function for changing the value
function changeInput(newVal) {
	if(!this.$target) this.$target = $('#text'); // stash the target for reuse
  this.$target
  	// programmatically change the value; does not fire 'change' event
  	.val(newVal)
    // now trigger your custom action that behaves 
		.trigger('customaction'); // add extra parameters, etc
}

$('#text')
  // regular input change
  .on('change', onchangeCallback)
  // the custom action you trigger programmatically
	.on('customaction', onchangeCallback)

$('#act').on('click', function() {
	// use the helper function
	changeInput('Changed by custom action 1');
})

$('#act2').on('click', function() {
	// use the helper function, again
	changeInput('Changed by custom action 2');
})

})(jQuery)