2

2つのクラスと、そのうちの1つで機能する関数があります

$('.div-image').click(function(){                    // image zoom 
    $('#image').attr("src",img_src);

    $('.div-image').attr('class','div-image-big');

});

およびhtmlのようなもの：

<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>

最初に画像または（div .div-image）をクリックした後、クラスdiv-imageがdiv-image-bigに変更されるのはなぜですか。しかし、もう一度クリックすると、関数$（'。div-image'）。click（function（）{...}が再度実行されます。問題はなぜそうなのかということです。この動作は必要ありません。これが必要です。関数は、クラスがdiv-image-bigではなくdiv-imageの場合にのみ機能します。ありがとうございます。

4

1 に答える 1

5

イベントハンドラーは、クラスではなく要素にバインドされます。バインドされる要素は、イベントがバインドされた時点でのクラスに基づいて決定されるため、後でクラスを変更しても、イベントハンドラーを持つ要素は変更されません。

イベントハンドラーをクラスに反応させる場合は、デリゲートを親要素にバインドする必要があります。そうすれば、イベントは親要素にバブルし、デリゲートハンドラーはその時点でクラスをチェックします。例：

HTML：

<div class="image-container">
  <div class="div-image">
    <div id="wrapper">
      <img id="image" src="image.jpg">
    </div>
  </div>
</div>

Javascript：

$('.image-container').on('click', '.div-image' ,function(){                    // image zoom 
  $('#image').attr("src",img_src);
  $('.div-image').attr('class','div-image-big');
});
于 2012-11-13T23:15:35.600 に答える