JS機能

Question

シナリオ：

機能1：

$(document).on('click','.select_lens_prescp_option',function(){ ....  }); 

機能2：

$(document).on('click','.lens_manual_change',function(event){ 
    // event.preventDefault(); 
    $('#lens_edit_manual_change_'+ 
    $(this).data('suborder')+",#contacts_prescription_manual_change_"+ 
    $(this).data('suborder')+ 
    ",#lens_save_manual_change_"+$(this).data('suborder')).toggle('slow'); 
    }); 

は今、私はクラスのクリックイベント内の同じ機能をしたいですlens_manual_changeですが、クラスselect_lens_prescp_optionのクリックイベント

$(document).on('click','.select_lens_prescp_option',function(){ 
    .... 
    if(form.find('.lens_form_fields').is(':hidden')){ 
     form.find('.lens_manual_change').trigger('click'); // this is the step I performed 
    } 
}); 

問題：最初の関数が2回トリガされます。

Answer 1

event.stopPropagation()内部イベントハンドラ内の関数が機能します。どの "最初の関数"、 "ファンクション1" または "機能2"

$('.first').on('click', function(){ 
 
\t alert(1); 
 
}); 
 
$('.second').on('click', function(event){ 
 
\t event.stopPropagation(); 
 
\t alert(2); 
 
});

.first{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:white; 
 
} 
 
.second{ 
 
    width:100px; 
 
    height:100px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top:50px; 
 
    background-color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<div class='first'> 
 
    <div class='second'> 
 
    </div> 
 
</div>

documentation