2

最初の列にチェックボックスが付いたテーブルがあります。行の任意の場所をクリックすると、クラス'row_selected'がテーブルの行に設定され、チェックボックスがオンになります。コードは次のとおりです。

$('#my_table > tbody > tr > td').live('click', function() {
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

問題は、一部のテーブルセルにボタンがあり、クリックした場合に行が選択されないようにすることです。すなわち

<tr>
    <td class="checkbox">
        <input type="checkbox" checked="false"/>
    </td>
    <td>blah<td>
    <td>
        <a class="myButton">do stuff</a>
    </td>
    <td>blah<td>
</tr>

myButtonをクリックする場合を除いて、jqueryクリックイベントを機能させたい。

誰かアイデアがありますか？

4

3 に答える 3

5

myButtonクラス要素での伝播を停止できませんか？

$('a.myButton').click(function(e) {
    e.stopPropagation();
});​

これは、リンクをクリックした場合を除いて、tdクリックトリガーがどのように機能するかを示すコードを使用した単純化されたjsFiddleの例です。

于 2012-04-20T16:44:37.640 に答える
1 
$('#my_table > tbody > tr > td').live('click', function() {
    if ($(this).children('a.myButton').length) return true; // prevents click on link
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

td内でリンクを見つけようとすると、それが見つかった場合はtrueが返されるため、リンクは引き続き機能します。（リンクに「クリック」アクションを実行させたくない場合は、falseを返します）

jsFiddleで簡単な例を作成しました。

.stopPropagationに変更すれば使用できます.liveが.on

$('a.myButton').click(function(e) {
    e.stopPropagation();
});​

$('#my_table > tbody > tr > td').on('click', function() {
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

ここで.stopPropagationは、を使用せずに機能する別の例を見ることができます.live。jQuery1.7+でのみ動作します

于 2012-04-20T16:37:48.860 に答える
1

メソッドの開始時にイベントソースを取得し、それが期待していたものでない場合は戻ることによってそれを行います。例えば

function getEventSrc(e)
{
    var eventIsFiredFromElement = e.target;
    if(eventIsFiredFromElement==null)
    {
        // I.E.
        eventIsFiredFromElement = e.srcElement;
    }
    return(eventIsFiredFromElement.type);
}

クリックされた要素のタイプを返します。ボタンならやめたいようです。

$('#my_table > tbody > tr > td').live('click', function(ev) {
    // Make sure event is not comming from a button.
    if(getEventSrc(ev) == 'button'){return;}

    if ($(this).children('a.myButton').length) return true; // prevents click on link
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})
于 2012-04-20T17:00:56.373 に答える