Using jquery .on() versus .click()
<p>I have a site that plays a stream. I perform an AJAX call to the server once a person presses a button.</p>

<pre><code>&lt;input type="submit" class="play" data-type="&lt;?php echo $result_cameras[$i]["camera_type"]; ?&gt;" data-hash="&lt;?php echo $result_cameras[$i]["camera_hash"]; ?&gt;" value="&lt;?php echo $result_cameras[$i]["camera_name"]; ?&gt;"&gt;
</code></pre>

<p>This prints out a bunch of buttons that the user can select. This is processed by the following code:</p>

<pre><code>&lt;script&gt;
$(document).ready(function(){

$(".play").on('click', function(){
    var camerahash = $(this).data('hash');
    var cameratype = $(this).data('type');
    function doAjax(){
        $.ajax({
            url: 'index.php?option=streaming&amp;task=playstream&amp;id_hash=&lt;?php echo $id_hash; ?&gt;&amp;camera_hash='+camerahash+'&amp;format=raw',
            success: function(data) {
                if (data == 'Initializing...please wait')
                {
                    $('#quote p').html(data); //shows a message here
                    setTimeout(doAjax, 2000);
                }
                else
                {
                    if (cameratype == "WEBCAM" &amp;&amp; data == 'Stream is ready...')
                    {
                        $('#quote p').html(data); //another message here
                        window.location = 'rtsp://&lt;?php echo DEVSTREAMWEB; ?&gt;/&lt;?php echo $session_id;?&gt;/'+camerahash;
                    }
                    else if (cameratype == "AXIS" &amp;&amp; data == 'Stream is ready...')
                    {
                        $('#quote p').html(data); //another message here
                        window.location = 'rtsp://&lt;?php echo DEVSTREAMIP; ?&gt;/&lt;?php echo $session_id;?&gt;/'+camerahash;
                    }
                    else
                    {
                        $('#quote p').html(data); //another message here
                    }

                }

            }
        });

    }
    doAjax();
});
});
&lt;/script&gt;
</code></pre>

<p>Everything works as the user gets messages when they click a button. But clicking another button doesn't show the messages any more. I've used the delegate event (<code>.on</code>) for dynamically loaded buttons (instead of <code>.click()</code>) which I thought would address this but it looks like I just don't get what I need to do.</p>
