JSFiddle - React, Tailwind, and code Playground

by Justin Bianchi

HTML

<button type="button">Click me to load some ajax content</button>

<div id="ajax_container"></div>

<div id="static_container"><input type="number"><br><input type="number"><br><input type="number"><br><input type="number"></div>

CSS

input {display:block; width:40px;}

#ajax_container{border: 2px solid blue;}

#static_container {border:2px solid green;}

JavaScript

var ajax_content = '<input type="number"><br><input type="number"><br><input type="number"><br><input type="number">';





$(function () {
    console.log('jquery ready');
    $('input[type=number]').bind('keydn input', function (event) { 
        console.log('bind() keydn input successful');
    });
    
    $('input[type=number]').on('keypress', function (event) { 
        console.log('on() keypress successful');
    });
    
    $('input[type=number]').on('change', function (event) { 
        console.log('on() change successful');
    });
    
    $('button').click(function(){
   $('#ajax_container').html(ajax_content);
    })
});