2

クリックするとアニメーションを切り替えるdivクラスがあります。このdiv（同じクラス名の番号の1つ）内には、いくつかの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();
4

1 に答える 1

2

画像にこれを追加するだけです：

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

    // your img functions stuff...

});

e.preventDefault();クリックイベント（画像から下の親要素へのバブル）を防ぐのに役立ち、不要な機能をトリガーします。

続きを読む: http://api.jquery.com/event.preventDefault/

于 2012-07-03T21:35:14.010 に答える