JS Funktion zweimal für nur einen Klick

Question

Szenario auslösenden:

Funktion ein:

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

Funktion zwei:

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

Jetzt möchte ich innerhalb Click-Ereignis der Klasse die gleiche Funktionalität tun lens_manual_change, aber klicken Sie auf Ereignis der Klasse 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 
    } 
}); 

Problem: Die erste Funktion wird zweimal ausgelöst.

Answer 1

event.stopPropagation() Funktion innerhalb inneren Ereignishandler wird funktionieren.

$('.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