title: Clicking on a dynamically added span using jQuery - on doesn't work
body: <p>I have a <code>span</code> which is added dynamically to my page. I want to do some action when clicking the span.</p>
  
  <p><strong>I have the following HTML</strong>:</p>
  
  <pre><code>    &lt;span class="assistly-widget" id="assistly-widget-1"&gt;            
  
  &lt;span style="width:65px;display:inline-block;min-height:22px;background: url(http://assets0.assistly.com/images/customer/widget/chat/launch_chat_sprite.png) no-repeat scroll 0 -40px transparent;"&gt;&amp;nbsp;
  
  &lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>Script on my page</strong>:</p>
  
  <pre><code>    &lt;script&gt;
      $(document).ready(function () {
          alert('test');
  
          $(document).on('click', '.assistly-widget span', function () {
              alert('click');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The code which renders the span:</p>
  
  <pre><code>         &lt;li&gt;
  
  
      &lt;script src="https://d218iqt4mo6adh.cloudfront.net/assets/widget_embed_libraries_191.js"
          type="text/javascript"&gt;&lt;/script&gt;
  
    &lt;script&gt;
  
        // ********************************************************************************
        // This needs to be placed in the document body where you want the widget to render
        // ********************************************************************************
  
        new DESK.Widget({
            version: 1,
            site: 'support.saxo.com',
            port: '80',
            type: 'chat',
            displayMode: 1,  //0 for popup, 1 for lightbox
            features: {
                offerAlways: false,
                offerAgentsOnline: false,
                offerRoutingAgentsAvailable: true,
                offerEmailIfChatUnavailable: false
            },
            fields: {
                ticket: {
                    // desc: &amp;#x27;&amp;#x27;,
                    // labels_new: &amp;#x27;&amp;#x27;,
                    // priority: &amp;#x27;&amp;#x27;,
                    // subject: &amp;#x27;&amp;#x27;
                },
                interaction: {
                    // email: &amp;#x27;&amp;#x27;,
                    // name: &amp;#x27;&amp;#x27;
                },
                chat: {
                    //subject: '' 
                },
                customer: {
                    // company: &amp;#x27;&amp;#x27;,
                    // desc: &amp;#x27;&amp;#x27;,
                    // first_name: &amp;#x27;&amp;#x27;,
                    // last_name: &amp;#x27;&amp;#x27;,
                    // locale_code: &amp;#x27;&amp;#x27;,
                    // title: &amp;#x27;&amp;#x27;
                }
            }
        }).render();
      &lt;/script&gt;
                          &lt;/li&gt;
  </code></pre>
  
  <p>Usually the <code>.on</code> works well, but in this case nothing happens. I get the <code>alert('test')</code>, but not the <code>alert('click')</code>.</p>