JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="some-container">
  <button class="add-new">
    Add new
  </button>
</div>

JavaScript

$('button.add-new').on('click', function() {
  // doesnt work, because the selector is not known yet
	alert(".on click");
});

$('button.add-new').click(function() {
	// doesnt work, because the selector is not known yet
	alert(".click");
});

$('.some-container').on('click', 'button.add-new', function() {
	// doesnt work, because the $(selector).on(...) is not known yet
	alert("container.on click");
});

$(document).on('click', 'button.add-new', function() {
	// works, document is given and "button.add-new" selector will matched dynamically
	alert("document.on click");
});