jQuery доступ к списку-> ul-> li-> span-> img

Это мой шорткод из li.

<li>
    <a href='#'><img src='img.png'/>
        <h2 style='margin-top: 0px; padding-top: 0px'>test</h2>
        <p><strong>{</strong><label>test</label><strong>}</strong></p>
        <p><strong>test</strong></p>
        <p><strong style='font-size: 17px; color: #fff'>10</strong>
        <br/><span id='onoff'><img src='on.png'/></span>
        <span id='delete'><img src='abc.png'/></span></p>
    </a>
</li>

Как вы можете видеть, li содержит весь html <a href>, который будет запускать файл при нажатии. Тем не менее, я хотел бы обнаружить щелчок изображений внутри span, оба они отдельно, <span id='onoff'> и <span id='delete'>

Это то, что я пробовал до сих пор без каких-либо результатов.

$('#page-main-listview ul li span').on("click", function(){
    if(($this).attr("id") == 'onoff'){
        // I dont know what to put here
        // I need to find img now and trigger 'onClick()'
    }
});

Редактировать: Я думаю, что я решил проблему, таким образом:

$('#page-main-listview').delegate('img', 'click', function(){
    $atrr = $(this).attr("name");
    alert($atrr);
    if($atrr == 'on'){

    }
});