をクリックdivといった子要素に反応するをクリック

Question

私のdomのようになります。

<div class="profile">
       <a href="#"><img src="/img1.gif" /></a> <b>100</b>
       <a href="#"><img src="/img2.gif" /></a>
</div>

Okってこれらの多くの要素をマイページで、jQueryを使っbindのイベントのようになります:

$(".profile").live('click', myCallback);


var myCallback = function(event) {
         // ??
};

現在、人がクリックの1、ハイパーリンクを変更したい画像を"/img1_on.gif"そうajaxコージに置き換えた値との間に の値を返します。

同じことをhappends場合、その他の画像をクリックすると、以外の画像の変更"/img2_on.gif"とでます。

できた場合に変換しますの 入divズドプラットフォームのcss?

Answer 1

$(".profile a").live("click", function(e) {
  var temp = $("img", this);
  var temp2 = temp.attr("src").split('.');

  temp.attr("src", temp2[0] + "_on" + temp2[1]);

  // Ajax goes here.

  e.preventDefault();
});

div要素がクリックされている1、およびないのdivの内側にリンクしたように、

あなたはそれを持っていました。この機能を使用すると、AJAXの部分に記入仮定して、あなたのために働く必要があります。

Answer 2

そこから

私はあなたが求めているものを全くわからないんだけど、あなたはクリックイベントを発生させた要素を検索したい場合は、e.targetを使用することができ、その後、$（e.target）。このようなもの。

$(".profile").live('click', function(e){
  if($(e.target).is("a"))
     $(e.target).find("img").attr("src","/new/url.jpg");
});

Answer 3

たとえば、サブリンクのみ（のこのがリンクになります）を選択します：

$(".profile > a")

画像について（このが操作するイメージであろう）。

$(".profile > a > img").live("click", function(event) {
    var src = $(this).attr("src");
    $(this).attr("src", src.replace(".gif", "_on.gif"));
    // ajax call in any way you prefer
    // in callback you can switch button state back
});

Answer 4

あなたはこのポストのまさにイベントの順序があり、何を説明する見つけることができますそれは、キャプチャまたはバブリング段階の間とするとき、さらにイベントの伝播を相殺するイベントに耳を傾けることを意味します。