Question

My code :

HTML

<div id="box">
    <div class="mappa-infobox">
        <div class="pulsanti">
            <span class="pulsante selected">YES</span>
            <span class="pulsante">NO</span>
        </div>
    </div>
</div>

<div id="example"></div>

jQuery

$(".mappa-infobox .pulsante").on("click", function () {
    console.log("ciao");
});

$(window).load(function () {
    $('#example').html($('#box').html());
});

seems that, after the document is loaded and the mappa-infobox "cloned" inside the example div, the handlers are not fired. Why?

Answer 1

You should use on() in delegated-event manner:

$("#example").on("click", ".pulsante", function () {
    console.log("ciao");
});

Where #example works as a parent element of .pulsante.

DEMO: http://jsfiddle.net/arEWv/