2

テーブル行（TR）が与えられます。ユーザーがテーブルの行をクリックするたびに、Googleドライブ/Googleドキュメントに表示されるのと同じようにチェックボックスをオンにします。

例外は、チェックボックスまたは<a>タグが異なるアクションを持っているためです...ユーザーがチェックボックスまたはタグをクリックした場合、<a>チェックボックスを自動的にチェック/チェック解除したくありません。クリックを追跡し、チェックボックスを選択するか、チェックボックスまたは<a>タグのクリックであるため無視するかをコードに通知するバインディングを設定するにはどうすればよいですか？

jsfiddleの例：http：//jsfiddle.net/xHKUZ/1/

サンプルコード：

<table>
<tr>
        <td class="selector">
            <input type="checkbox" name="folders" value="67">
        </td>
        <td class="name">
            <a>Item 15</a>
        </td>
        <td class="creator">
            <span class="creator">Your Name</span>
        </td>
        <td class="last_modified">
            <time class="" datetime="2012-11-11T00:08:09Z">Nov-10 4:08 PM</time>
        </td>
        <td class="actions">
            <div class="actions-group">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-gear">Settings</i>
                    <i class="icon-caret"></i>
                </a>
                <ul class="dropdown-menu dropright">
                    <li><a data-rename="true">Rename</a></li>
                    <li><a data-archive="true">Delete</a></li>
                </ul>
            </div>
        </td>
</tr>
</table>

</ p>

4

5 に答える 5

2

e.stopPropagation行クリックを処理したくない要素に使用します。下記参照、

オプション1：

$("table").on('click', '.noclick', function (e) {
    e.stopPropagation();
}).on("click", "td", function(e) {
    console.log(e);
});

HTML：

<input type="checkbox" class="noclick" name="folders" value="67">

デモ：http： //jsfiddle.net/xHKUZ/7/

オプション2：

全体をブロックしたい場合TDは、簡単にできます

$("table").on('click', 'td:not(.noclick)', function (e) {
    console.log(e);
});

または単に自分で処理します。

$("table").on('click', 'td', function (e) {
    if ($(this).hasClass('noclick')) { return; }
    console.log(e);
});

HTML：

 <td class="selector noclick">
     <input type="checkbox" name="folders" value="67">
 </td>

デモ：http： //jsfiddle.net/xHKUZ/16/

于 2012-11-12T21:29:06.387 に答える
1 
$("table").delegate("td", "click", function(e) {
  console.log(e);
  // e.delegateTarget === your table element
  // e.currentTarget === the td clicked
  // e.target === the actual element that you clicked
});​

e.targetのノードタイプをチェックして、目的の動作を取得できるはずです。

于 2012-11-12T21:31:26.343 に答える
0

Jquery on（）メソッド：

$("table").on("click", "input", function(event){
   var clicked_checkbox = $(this);
});
于 2012-11-12T21:29:10.760 に答える
0

どうぞ：

$("tr").click(function(event){
    if(!$(event.srcElement).is("a"))
    {
        var checkbox = $(this).find('input[type="checkbox"]');
        $(checkbox).prop("checked",!$(checkbox).prop("checked"));
    }
});​

http://jsfiddle.net/mwk6W/1/

于 2012-11-12T21:42:26.627 に答える
-1

「デフォルト」関数をトリガーせずに、ユーザーがまたはのいずれかをクリックしたときに別の関数をa起動する場合は、次のような他の関数に戻るだけです。checkboxfalse

$("table").delegate("td", "click", function(e) {
    // Default stuff...
    console.log(e);
});

$( 'a' ).click( function() {
    // Do something else...
    return false;
});

$( 'input[type="checkbox"]' ).click( function() {
    // Do something else...
    return false;
});

</ p>

于 2012-11-12T21:37:41.357 に答える