jQuery. Changing from live() to on()
<p>I am pulling a number of elements to my page via AJAX. These elements come in as such:</p>

<pre><code>&lt;div id="offerWrapper7" class="offerWrapper"&gt;
    &lt;div class="resultsSummaryBox bevelBox" style=""&gt;
        &lt;div class="imgBox"&gt;
            &lt;div class="titleBox"&gt;Title Title&lt;br&gt;
                    &lt;span class="infoButton" id="info592"&gt;i&lt;/span&gt;
            &lt;div class="resultsBoxFullText" id="info592"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I need to bind a click event to <code>.infoButton</code> which in turns opens a jQuery UI dialogue with the content of <code>.resultsBoxFullText</code>.</p>

<p>I have managed to achieve this using live() (shown below). </p>

<pre><code>$(".infoButton").live('click', function(){
    $( "#info594" ).dialog({
        height:400,
        width:600,
        show: 'fade',
        hide: 'fade'
    });
});
</code></pre>

<p>With live being depreciated could someone show me how to do this with on() please. I thought it would be as simple as replacing live with on but it appears this is not the case.</p>
