CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Sideshow
Sideshow

Reputation: 1351

JQuery make image elements non active in clickable div

I have a div class that when clicked toggles an animation. Within this div (one of a number with the same class name) are a number of img icons. I want to maintain the click on the div but not on the images inside the div - ultimately the images will fire another function when clicked.

So far my JQuery code is as follows:

$(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();

Upvotes: 2

Views: 1082

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206268

just add this for your images:

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

    // your img functions stuff...

});

e.preventDefault(); will help prevent the click event - bubble from images to the parent element underneath - triggering unwanted functions.

read more: http://api.jquery.com/event.preventDefault/

Upvotes: 2

Related Questions