Question

two click handling functions

$('#current_options').on('click', 'td', function(){
    $('#product_options_list tbody').css('display', 'none');
    $('.sub_options tbody').css('display', '');
    var my_id = $(this).parent().find('input').val();
    $('#product_options_list thead').css('display', '');
    $('#product_options_list tbody#'+my_id).css('display', '');
});

$('#current_options').on('click', '.icon-minus-sign', function(e){
    e.preventDefault();
    var rem_id = $(this).parent().find('input').val();

    //remove corresponding option values
    $('#product_options_list tbody#'+rem_id).remove();

    //either highlight next options values or hide table header if no other values present          
    $('#product_options_list thead').css('display', 'none');
    $(this).parent().parent().remove();


});

html

<table id="current_options" class="table">
   <tbody>
      <tr>
         <td>
            Size<i class="icon-minus-sign"></i>
         </td>

basically, I want to stop the click handler on the td from firing if the click handler on the i inside the td is clicked.

Answer 1

I think you are looking for jQuery’s stopPropagation(), like this:

$('#current_options').on('click', '.icon-minus-sign', function(e){
    ..
    e.stopPropagation();
});