.on() not adding event to items added from an ajax based fnDraw() in datatables

Question

When a checkbox is pressed a datatable retrieves new data via fnDraw() using ajax. The .on() event however is not adding the event correctly.

$("#reviewcheck").click(function() { reviewTable.fnDraw(); });

$(".review tbody td img").on("click", function () 
                {
                    console.log("here");
                    var nTr = this.parentNode.parentNode;
                    var hide = document.getElementsByName(reviewTable.fnGetData(nTr)[23] + "h")[0];
                    if ( this.src.match(\'details_close\') )
                    {
                        var name = document.getElementsByName(reviewTable.fnGetData(nTr)[23] + "c")[0];
                        hide.value = name.value;
                                                this.src = "images/details_open.png";
                                                reviewTable.fnClose( nTr );
                    }
                    else
                    {
                        /* Open this row */
                        this.src = "images/details_close.png"
                        reviewTable.fnOpen( nTr, fnFormatDetails(reviewTable, nTr), \'details\' );
                                                var name = document.getElementsByName(reviewTable.fnGetData(nTr)[23] + "c")[0];
                        name.value = hide.value;
                    }
                } );

Answer 1

replace

$(".review tbody td img").on("click", function () 

with

$('body').on("click",".review tbody td img", function () 

Answer 2

The syntax is slightly different for event delegation

$(".review").on("click", ' tbody td img', function () {
})

(Assuming the .review element is not dynamically added)

The event must be bound to an element which is already present in the dom(left selector used before on()), and then the dynamic element selector must be passed as the second argument to .on()