1

各行<input type="checkbox" />の最初のセルに があるテーブルがあります。

特にチェックボックスを切り替えるクリックハンドラーのセットアップが<tr>あります。

実際のチェックボックスをクリックしない限り、これは完全に機能しています。その結果、チェックボックスは、デフォルトの動作で1回、<tr>イベントハンドラーで1回、2回トグルされるため、本来の状態とは反対の状態になります。

私がやりたいことは、基本的にチェックボックスのクリックを無視し、tr のクリックに応答することです。

これがtrのイベントハンドラーです

$('.files-table tbody').on('click', 'tr', function (e) {
    var check = $('.check', this);
    check.prop('checked', !check.prop('checked'));

    check.prop('checked') ? selected++ : selected--;
    numSelected.html(selected + ' item' + (selected === 1 ? ' ' : 's ' ) + 'selected: ');
    if (selected == 1) {
        withSelected.addClass('in').removeClass('hide');
        noSelected.removeClass('in').addClass('hide');
    } else if (selected == 0) {
        withSelected.removeClass('in').addClass('hide');
        noSelected.addClass('in').removeClass('hide');
    }

    if (check.prop('checked')) {
        selectedItems[check.data('type')].push(check.data('id')+"");
    } else {
        selectedItems[check.data('type')].splice(check.data('id')+"");
    }
    console.log(selectedItems);
    $(this).toggleClass('info');
});

そして、ここに行の例があります：

<tr>
    <td style="width:15px;">
      <input class="check" type="checkbox" data-id="6" data-type="directories">
    </td>
    <td>
      <a href="/files/browse/1. First/1.1 First Child of First/6" 
         class="needs-tooltip" 
         title="Browse Directory">
        <i class="icon icon-folder-close"></i>
      </a> 
      1.1 First Child of First
    </td>
    <td>Directory</td>
    <td>0 Items</td>
    <td>27 Jan 2013</td>
    <td>--</td>
    <td>--</td>
</tr>
4

2 に答える 2

2

クリックの発生元を確認できます。

if ( ! $(e.target).is(':checkbox') ) {
    $('.check', this).prop('checked', function (i, el) {
        el.checked ? selected-- : selected++;
        return ! el.checked;
    });
}
于 2013-01-28T03:26:20.767 に答える
1

イベントが親に伝播するのを防ぎます。

$(".check").on('click', function (e) {
   e.stopPropagation();
});

これにより、チェックボックスの通常の動作 (チェックされた状態の切り替え) を続行できますが、クリック イベントは親に到達して再度クリックすることはできません。

于 2013-01-28T03:25:39.353 に答える