title: 3 Different Types of "click" effects for Jquery. Differences and issues with each?
body: <p>Recently I have been making a web app. I noticed there are 3 different types of &quot;click&quot; effects for Jquery.</p>
  <p><b>1:</b></p>
  <pre><code>$(&quot;element&quot;).click(function() {
  </code></pre>
  <p>This one works on all devices, but has issues with dynamically generated elements. This I know. The real issue comes with the later.<br>
  <b>2:</b></p>
  <pre><code>$(&quot;element&quot;).on('click', function() {
  </code></pre>
  <p><b>VS</b><br><br>
  <b>3:</b></p>
  <pre><code>$(document/element).on('click', &quot;element&quot;, function() {
  </code></pre>
  <p>I was using the third option because it works for all elements, both predefined and generated. It works great on windows-&gt;chrome. I went to test my web app on Iphone-&gt;Safari, and not a single click effect would work. I finally realized that it was the type of click. It seems option <strong>3</strong> does not work on Iphone, but option <strong>1</strong> and <strong>2</strong> do. Can someone explain this? Does option <strong>2</strong> work for dynamically generated elements? I want to be sure I dont have click issues when I deploy. Thanks!</p>