3

他の動的に作成されたデータテーブルとのユーザーインタラクションに基づいてデータのテーブルを動的に作成するgreasemonkeyスクリプトを作成しようとしています。私の問題は、テーブルを作成するたびに2つのパスを作成する必要があることです。1つはテーブルを作成するためのもので、もう1つは、イベントハンドラーを（idで）追加して追加するテーブル内のすべてのオブジェクトを取得するためのものです。それらへのさまざまなイベントハンドラー。

onClickたとえば、テーブルを作成してHTMLに挿入する前に、テーブルtdにイベントを追加しようとすると、「コンポーネントが利用できません」という例外が発生します。

これは非常に面倒です。なぜなら、ハンドラーを追加するために2回目のパスを作成するときに、IDのリストとそれらの要素に対して何をすべきかを個別に維持するか、に基づいて、私が知っている命名規則を開発する必要があるからです。 id、要素で何をすべきか。

これを行うためのより良い方法が必要です。私はまだそれを理解していません。誰かアイデアはありますか？

4

4 に答える 4

11

まず、TD ごとに異なる ID が必要な理由を知りたいです。ID はインデックスなどの重要な情報を保持していますか? この状況では、ループ内で各 TD を作成する方がよい場合があります。また、明らかに、存在しない DOM 要素にイベント ハンドラーをアタッチすることはできません。DOM に注入する必要はありませんが、ある程度存在する必要があります。

jQuery の live() は魔法のミステリーではありません。イベント委任を使用しているだけなので、イベントをテーブルなどの親要素にアタッチし、クリックのターゲットに応じて何が起こるかを決定します。これが初歩的な例です。ハンドラーを「body」要素に登録し、ターゲットが何であるかを毎回テストします。それが TD 要素である場合は doSomething() ->

document.body.onclick = function(e) {

    var realTarget = e ? e.target : window.event.srcElement;

    if ( realTarget.nodeName.toLowerCase() === 'td' ) {
        doSomething();
    }

};

イベント委任は、最新のブラウザがイベント モデルを実装する方法である、イベント バブリング (または「伝播」) と呼ばれるものに依存しています。各イベントは、トリガーされると、それ以上進めなくなるまで DOM を上方向に移動します。したがって、段落内のアンカーをクリックすると、アンカーの「クリック」イベントが発生し、その後、段落の「クリック」イベントが発生します。

于 2009-03-08T09:15:32.943 に答える
5

jQuery 1.3+には、まだ存在しない要素のイベントハンドラーを設定できる新しいlive（）関数があります。

于 2009-03-08T07:14:28.380 に答える
1

要素がページに追加されるのを待ってから、イベントハンドラーを追加する必要があります。

「現在および将来、このタイプのすべての要素にこれを追加する」と言う簡単な方法はありません。

タイマーで定期的にページをチェックして新しい要素を確認し、イベントのキュー（またはその他のプロパティ）を表示されたとおりにすべて舞台裏で適用することができます。これは抽象化して再利用できます。たとえば、Jqueryはそのようなことを行うことができます。

于 2009-03-08T07:15:15.213 に答える
1

JimmyP が指摘したように、問題はイベント バブリングを使用して簡単に解決できます。ブラウザーの不一致を回避するためにラッパー関数を作成することを検討するかもしれません - 私自身のバージョンはここで見つけることができ、次のように使用されます:

capture('click', '#element-id', function(event) {
    // `this` will be the originating element
    // return `false` to prevent default action
});
于 2009-03-08T14:37:00.313 に答える