jQuery function does not work on appended html form

https://stackoverflow.com/questions/48269730/jquery-function-does-not-work-on-appended-html-form?noredirect=1#comment83523266_48269730

by Brian Kueck

HTML

<html>
  <body>
    <input type="text" id="contribution_type" placeholder="Enter some text here..." />
    <div id="contribution">
      <button id="button1" disabled>Click me. This button will change into a form upload field.</button>
    </div>
  </body>
</html>

JavaScript

$('#contribution_type').on('keyup', function() {
    $('#button1').removeAttr('disabled');
  });
    
  $('#contribution_type').on('blur', function() {
    let value = this.value;

    $("#contribution").empty();

    if (value !== 'none') {
      let div2 = '<input type="file"><div id="contribution">Attach a file. Then press this button:<button>Test</button></div>';
      $('#contribution').append(div2);
    }

    $('input[type="file"]').on('blur',function(e){
      if (e && e.target && e.target.files && e.target.files[0] && e.target.files[0].name) {
      	let fileName = e.target.files[0].name;
        let output = 'The file "' + fileName +  '" has been selected.';
    		console.log(output);
        alert(output);
      }
  	});
	});