2

多くの場合、次のような追加機能にフックされた要素があります。

$('.myfav').autocomplete();
$('.myfav').datepicker();
$('.myfav').click(somefunction);

しかし、このクラスのより多くのインスタンスがいくつかのコードを介して動的に生成されると、新しい$('.myfav')ものは無効になり、再配線が必要になるため、次のようにします。

$("#somelink").click(function(){
     //generate 10 new $('.myfav') and append them to the DOM
     //re-wire them again as in the block above
     $('.myfav').autocomplete();
     $('.myfav').datepicker();
     $('.myfav').click(somefunction);
});

これが意味するのは、2つの同一のコードブロックができてしまうということです。1つは最初のページの読み込み用で、もう1つは動的に生成される新しい要素を再配線するためのものです。これはDRYコードではなく、あまり効率的ではありません。

これは本当にこれを行う唯一の方法ですか、それとも別のベストプラクティスがありますか？私の腸は、これよりも効率的なものが必要だと言っています（コードのDRYを支援するためにも）。

アップデート

cletusが説明しているように、.liveは.clickでうまく機能するようです。

$('.myfav').live("click", somefunction);

しかし、.autocompleteのようなカスタムセットのプラグインで試してみましたが、機能しませんでした。私はこれを試しました：

$('.myfav').live("click", autocomplete("somefile.php", {max: 15, mustMatch: true}));

したがって、ライブはこれらのカスタムプラグインを処理できるようには見えません（もちろん、私は間違っている可能性があります。何か知っている場合は更新してください）

4

4 に答える 4

3

使用live()：

$(".myfav").live("click", somefunction);

これにより、そのイベントハンドラーが、呼び出し後に動的に作成された要素にバインドされlive()ます。

于 2009-10-17T05:49:59.730 に答える
3

.live（）ドキュメントには...

.liveは、liveQueryが提供するイベントなしスタイルのコールバックをサポートしていません。.liveにバインドできるのはイベントハンドラーのみです。

そこで、liveQueryを調べました。これは、次のようなもので必要なことを正確に実行できると思います。

$('.myfav').livequery(function() {
  $(this).autocomplete();
  $(this).datepicker();
  $(this).click(somefunction);
});

便利そう！

于 2009-10-17T08:29:10.427 に答える
2

live（）;を使用できると思いますが、どのように記述したかはできません。

現在の実装：

$('.myfav').live("click", autocomplete("somefile.php", {max: 15, mustMatch: true}));

これは、jQueryがclass = "myfav"の新しい要素を見つけたときではなく、すぐにオートコンプリートを実行します

次の構文を使用する必要があります。

$('.myfav').live("click", function () {
    $('.myfav').autocomplete("somefile.php", {max: 15, mustMatch: true})
});

匿名関数内では、通常の構文や関数などをすべて使用できます。

これでうまくいくと思いますが、まだテストしていません。後でクリックイベントが発生したときに実行する関数をjQueryに送信します。

于 2009-10-17T06:34:48.267 に答える
1

このような場合、私は通常、バインド/バインド解除を行うinit関数を使用していることに気付き、それをajaxCompleteなどで呼び出します。この場合、おそらく次のようになります。

function init()
{
    $('.myfav').unbind('click');
    $('.myfav').autocomplete('disable');
    $('.myfav').datepicker('disable');
    $('.myfav').autocomplete();
    $('.myfav').datepicker();
    $('.myfav').click(somefunction);
}

もちろん、プラグインによってはバインド解除の外観が異なる場合がありますが、jQueryUIはたとえば$（'。myfav'）。draggable（'destroy'）を使用していると思います。

于 2009-10-17T12:50:14.403 に答える