Javascript JQuery使图像元素在clickable div中处于非活动状态

我有一个div类，单击它可以切换动画。在这个div（具有相同类名的数字之一）中有许多img图标。我想保持对div的点击，但不是对div内的图像的点击-最终，图像在点击时会触发另一个功能

到目前为止，我的JQuery代码如下：

$(document).on('click', '.list_body', function() {
    $(this).nextAll('.list_info:first').slideToggle(500);
    return false;
});

$('.list_body').on('click', 'img', function(e){
    e.preventDefault();
    alert("Test");
});

var ls="<div class='list_body'><div class='lister'><img src='"+path+stat1+"' /><img src='"+path+stat2+"' /><img src='"+path+stat3+"' /><img src='"+path+stat4+"' /><img src='"+path+stat5+"' /></div><div class='lister'>"+split_stats[5]+" "+split_stats[6]+" "+split_stats[7]+"<br />["+split_stats[12]+"]"+"</div><div class='lister'>"+split_stats[13]+"</div><div class='lister'><a href='javascript:void(0);' class='lister_a'>View Appointment &amp; Actions</a></div></div>"

ls+="<div class='list_info'>";
ls+="<ul class='add1'><li>"+split_stats[8]+"</li><li>"+split_stats[9]+"</li><li>"+split_stats[10]+"</li><li>"+split_stats[11]+"</li><li>"+split_stats[12]+"</li></ul>";
ls+="<ul class='add2'><li><strong>Tel: </strong>"+split_stats[14]+"</li><li><strong>Mobile: </strong>"+split_stats[15]+"</li><li><strong>Email: </strong>"+split_stats[16]+"</li><li><strong>Job ID: </strong>"+split_stats[17]+"</li></ul>";
ls+="<div class='bottom_links' data-job_id='"+split_stats[17]+"'><div class='lister'><a href='javascript:void(0);' data-ref1='1' data-job_id='"+split_stats[17]+"'>Print Files</a></div><div class='lister' data-ref1='2'><a href='javascript:void(0);' data-ref1='2' data-job_id='"+split_stats[17]+"'>Add Message</a></div><div class='lister'><a href='javascript:void(0);' data-ref1='3' data-job_id='"+split_stats[17]+"'>Add Tracking No.</a></div><div class='lister'><a href='javascript:void(0);' data-ref1='4' data-job_id='"+split_stats[17]+"'>///</a></div></div>";
ls+="</div>";

$(ls).appendTo('.list_holder');
$('.list_info').hide();

$（文档）。在（'单击'，'上。列出_body'，函数（）{
$（this）.nextAll（'.list_info:first'）.slideToggle（500）；
返回false；
});
$（'.list_body'）。在（'click'，'img'，函数（e）上{
e、 预防默认值（）；
警报（“测试”）；
});
var ls=”“+split_stats[5]+“”+split_stats[6]+“”+split_stats[7]+“
[“+split_stats[12]+”]+“”+split_stats[13]+“”
ls+=”；
ls+=“
”+split_stats[8]+“
”+split_stats[9]+“
“+split_stats[10]+”
“+split_stats[11]+”
“+split_stats[12]+”
电话：“+split\u stats[14]+”
手机：“+split\u stats[15]+”
电子邮件：“+split\u stats[16]+”
工作ID:“+split\u stats[17]+”

只需为您的图像添加以下内容：

$('.list_body').on('click', 'img', function(  e  ){
    e.preventDefault();

    // your img functions stuff...

});

e.preventDefault（）

将有助于防止单击事件-从图像到下面的父元素的气泡-触发不需要的函数

---

阅读更多：

我们需要的不仅仅是这些，伙计。

.list\u body

是您的父div吗？单击图像时的代码在哪里？我添加了html-我可以看到上面的逻辑，但就是无法让它工作。我可以将滑动切换添加到锚文本中。