jQuery访问listview-> ul-> li-> span-> img

时间:2013-12-13 16:33:34

标签: javascript jquery html

这是我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'){

    }
});

1 个答案:

答案 0 :(得分:0)

您正在使用span ID而不是列表中的类,这使我相信在添加更多列表元素时您会遇到问题。

为方便起见,第一张图片链接为<span data-tag="onoff" class="clickMe">,第二张为<span data-tag="delete" class="clickMe">。然后你可以轻松地使用类似的东西进行循环:

$('.clickMe').click(function() {
    alert($(this).data('tag'));
});