1

私はjQueryプラグインを書いています。このプラグインの init メソッドを設定するときに、コンテキストのイベントを設定したいのですが、イベントのデリゲート ターゲットを設定するか、イベントをコンテキストに直接バインドする必要があるかがわかりません。

デリゲートを検討したい主な理由は、動的コンテンツでこのプラグインを使用することです。場合によっては、プラグインが呼び出されるこれらの要素が ajax を使用してページに追加されることがあります。この場合、ajax 呼び出し後にイベントを破棄して再バインドする必要がないように、イベントを設定する方法はありますか?

現時点では、私は次のようなことをしています：

$(this).on('click', initEditor);

次のようなことを検討する必要があります。

$('body').on('click', this, initEditor);

または、次のように、オプションのオプションとしてデリゲートを格納するイベント:

$(options.delegate).on('click', this, initEditor);

デリゲート形式を使用すると、イベントは実際のコンテキスト要素ではなく、コンテキストのセレクターにバインドされることに気付きました (つまり、これがアンカーの場合、ページ上のすべてのアンカーにバインドされます)。それを回避する方法はありますか？

ありがとう！

4

1 に答える 1

1

子要素のみにバインドする必要がある場合は、これを使用します。

$("#my_target").on("click", ".my_class_target", handler);

「.on」イベントは、「デリゲート、バインド、ライブなど」を置き換えます。すべてのイベントを 1 か所で添付できるようになりました。これは非常に便利です。その前に、ajax 要素では機能しない「バインド」を使用する必要があるため、「ライブ」が制限されているためです。

私の例では、「#my_target」内にある「.my_class_target」でのみ動作するアタッチです。したがって、「$("body").on("click", ".my_class_target", handle) のように body に開始要素をアタッチすると、すべての ".my_class_target" がアタッチされます。次に、シークレットは "selector にあります。最初のセレクター "$(#my_target")" は、ページが読み込まれるときに作成する必要があり、もう 1 つのセレクターは ajax によって読み込まれるか、dom によって作成されることに注意してください。

例を見てみましょう：

<div id="my_div">
    <ul class="ul-1">
        <li class="li-1-1"></li>
        <li class="li-1-2"></li>
        <li class="li-1-3"></li>
        <li class="li-1-4">
            <ul class="ul-2">
                <li class="li-2-1"></li>
            </ul>
        </li>
    </ul>
</div>

js:

my_function = function(){};
$("body").on("click", "li", my_function); //handle all li
$("body").on("click", "ul.ul-1 > li", my_function); //attach only in li-1-X 

// if ul-1 is generate with ajax:
$("#my_div").on("click", "li", my_function); // will work with all li
$("ul.ul-1").on("click", "li", my_function); // wont work because the first selector "ul.ul-1" was not generated when the attach was called.

これが助けになることを願っています。

フォント:

http://api.jquery.com/on/

http://api.jquery.com/category/selectors/

于 2013-05-03T17:54:17.693 に答える