Question

I am pulling a number of elements to my page via AJAX. These elements come in as such:

<div id="offerWrapper7" class="offerWrapper">
    <div class="resultsSummaryBox bevelBox" style="">
        <div class="imgBox">
            <div class="titleBox">Title Title<br>
                    <span class="infoButton" id="info592">i</span>
            <div class="resultsBoxFullText" id="info592">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.</div>
            </div>
        </div>
    </div>
</div>

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

I have managed to achieve this using live() (shown below).

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

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.

Answer 1

$("an-element-already-on-the-page").on('click', '.infoButton', function(){

The selector before the .on must already be on the page and the target element (.infoButton) must be inside it. So you can use document or body.