0

ボタンがクリックされたときにページにいくつかのリンクを生成するプレーンなJavaScript関数があります。次に、生成されたリンクのクリック機能を追加します。それぞれにクラスを追加しましたが、まだ機能していません。すべてがリアルタイムで行われ、次のmooToolsスクリプトは機能しませんが、ページに正常に読み込まれます。

window.addEvent('domready', function() {
    $$('.jTrigger').addEvent('click', function(){alert('clicked!');})
    })

私はjQueryに相当するものを探しています

$(document).ready(function()
{
$(".myClass").live("click", function()
{
  do stuff here...
};
});

私はClosureまたはjQuery（使用方法を知っているもの）を使用しますが、Joomlaバックエンドプラグインに取り組んでおり、MooToolsに固執するように言われました。

4

2 に答える 2

1

MooToolsはイベントの委任もサポートしています。ドキュメントの例を次に示します。

// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    request.send({
        url: target.get('href')
    });
});

したがって、推測では（私はMooToolsを使用したことがありません）、myClass問題の要素にクラスを追加した場合は、次のようになります。

window.addEvent('domready', function() {
    $(document).addEvent('click:relay(.myClass)', function() {
        // One of the elements was clicked
    });
});

イベントの委任をサポートしていない古いバージョンのMooToolsを使用している場合は、問題ありません。自分で行うことができます。基本的に、イベントをコンテナにフックし（可能性がありますがdocument.body、可能であれば、要素を追加する場所の近くで実行します）、イベントが発生しevent.targetたら、を見てください。これにより、イベントの実際の要素がわかります。で発生しました。から始めてevent.target、各親をチェックして、が含まれているかどうかを確認しますmyClass。その場合は、イベントを処理します。大まかに：

$(container).addEvent('click', function(event) {
    var match, elm;
    for (elm = event.target; !match && elm; elm = elm.parentNode) {
        if ($(elm).hasClass("myClass")) {
           match = elm;
        }
    }
    if (match) {
        // Yup, its a "myClass" element -- process the click
    }
});
于 2012-04-14T16:04:50.603 に答える
0

コードが実行されると、リンク arn が適切に配置されず、addEvent はそれらを刺激しません。このアサーションは、単純な console.log で確認できます (少なくとも ff の firebug を使用)。

window.addEvent('domready', function() {
     console.log($$('.jTrigger');
     $$('.jTrigger').addEvent('click', function(){alert('clicked!');})
})

次の 2 つの選択肢があります。

  • 作成されるたびにすべてのリンクに動作を追加します (私には少し不器用です)

  • Dom 要素 (それらを含む最小の要素) を選択し、リレーでイベント マネージャーをそれに適用します。

    window.addEvent('domready', function() { document.id(document.body).addEvent('click:relay(a.jTrigger)', function(){alert('clicked!');}); } )

上記の例では、あなたのページについて何も知らず、ボディ要素に確実にリンクが含まれているため、動作を html ボディに適用しました。この動作をより小さなサブセットに適用する必要があります (ドキュメントで明確に報告されているように、パフォーマンスの問題を最小限に抑えます)。

一般に、要素にできるだけ近い親に委譲することをお勧めします。たとえば、ドキュメントの本文ではなく、ページ内の要素に委任します。

参照: http://mootools.net/docs/core/Element/Element.Delegation

于 2012-04-14T16:16:00.000 に答える