1

画面に同じウィジェットが 3 つあります。ウィジェットは、ユーザーが自分の画面に表示することを選択したコンテンツを含む 3 つの div タグのように、画面上で移動および配置できます。iGoogle が行ったことに少し似ています。したがって、基本的に、画面上に同じウィジェットを 0 個以上持つことができます。

IDの代わりにhtmlのクラスを使用して、これを機能させました。

<div class="widget_1">
    <div class="widget_header_1"></div>
    <div class="widget_sub_header_1"></div>
    <div class="widget_content_1"></div>
    <div class="widget_footer_1"></div>
<div>

したがって、これらのウィジェットが 2 つある場合、ユーザー画面には class を持つ 2 つのウィジェットが表示されますwidget_1。つまり、上記の html は html ソースに 2 回含まれます。

とにかく、ウィジェットの sub_header に、ウィジェットのcontentセクションにデータを追加するボタンがあります。

$('.my_button').live('click',function() {
    get_data( $(this) );
});

最初のボタンをクリックするwidget_1とコンテンツのみが変更され、2番目のボタンをクリックするとコンテンツのみが変更され、widget_1他のボタンには影響しませんwidget_1。

そのために私は使用しています：

$(this).closest('.widget_1').find('.widget_content_1').empty().append( some_data_here );

私の質問は、sub_headerウィジェットのボタンがクリックされたときに読み込み中の画像をコンテンツに追加したいので、試しました：

$(this).closest('.widget_1').find('.widget_content_1').prepend( "<img class='imgLoading' src='/img/loading_white_32.gif'></img>" );

これは、ボタンがクリックされたウィジェットに読み込み中の画像のみを表示するという点で機能しますが、画面にwidget_12 がある場合はクリックした場所に 2 つの画像が表示され、クリックした場合は5 つの画像が表示されます。 5が画面に表示されます。 widget_1widget_1widget_1

なぜそれが起こっているのですか？

画面上に がwidget_1いくつあっても、クリックすると読み込み中の画像が 1 つだけ表示されるはずです。widget_1

4

1 に答える 1

1

次のコードのようになります。

$('.my_button').live('click',function() {
    get_data( $(this) );
});

作成するウィジェットごとに 1 回実行します。これは不必要であり、実際には非生産的です。なぜなら、 を 1 回呼び出すだけで、に一致するすべての要素からバブリングlive()するイベントを「見る」委任されたハンドラーがインストールされるためです。click.my_button

そのコードを 1 回だけ実行する方法を見つける必要があります (おそらく、ウィジェットに共通の初期化ルーチンがある場合)。

ちなみに、jQuery 1.7 以降、 live()は非推奨になり、on()が優先されることに注意してください。上記のコードは次のようになります。

$(document).on("click", ".my_button", function() {
    get_data( $(this) );
});
于 2012-11-05T12:18:47.790 に答える