2

これは、DOMからの簡略化された抜粋です。

<td>
    <button value="11" class="expand ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
        <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
        <span class="ui-button-text"></span>
    </button>
</td>

これはテーブルのすべての行（〜500）で繰り返され、テーブルのIDは「eventTable」です。

ボタンのインスタンス化（jQueryUI）は次のとおりです。

$('.expand').each(function(){
    $(this).button({
        text: false,
        icons: {
            primary: "ui-icon-plus"
        }
    });
});

これがテーブル#eventTableのイベント委任の一部です

$('#eventTable').click(function(e){
    if($(e.target).is('.expand'){
        // ...

現在、Firefox 3.6.x、IE7,8では、これは機能し、ifステートメントにステップインします。ただし、SafariとChromeでは、周囲のではなくe.target最初のを表します。spanbutton

なぜこうなった？それを乗り越えて作業することはできますが、後で別のシナリオで同じ問題が発生しないように、説明が必要です。Webkitが正しく、Trident / Geckoが間違っているのはなぜですか？何が違いを引き起こしたのですか？

4

1 に答える 1

2

回答として私のコメントを投稿します。

clickDOMで大量のハンドラー参照を取得しないように注意している場合は、.delegate()代わりに使用することをお勧めします。1つのハンドラーのみをコンテキストに「バインド」し、イベントターゲットが指定したセレクターと一致するかどうかを確認し、一致する場合はハンドラーを起動します。

何かのようなもの

$('#eventTable').delegate('click', '.expand', function() {
    // click on the .expand element/s
});

十分なはずです。

于 2011-05-20T06:29:01.133 に答える