Question

两次点击处理功能

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

基本上，如果单击td中的i上的click处理程序，我想停止td上的click处理程序。

Answer 1

我认为你正在寻找jQuery的stopPropagation()，就像这样：

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

Answer 2

你需要stopPropagation这样：

$('#current_options').on('click', '.icon-minus-sign', function(e){
    e.preventDefault();
    e.stopPropagation(); //this stops the event from moving up the parents

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


});

如果您正在使用.on()或.delegate()，那么只需在return false;

结束时右function行

参考：http://api.jquery.com/event.stopPropagation/

确定父事件处理程序单击了哪个子元素

2 个答案: