Нажмите на div, но хотите, чтобы дочерние элементы реагировали на щелчок

Question

Мой дом выглядит так:

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

Хорошо, у меня есть много таких элементов на моей странице, поэтому, используя jQuery, я связываю все события следующим образом:

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


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

Теперь, когда кто-то нажимает на 1-ую гиперссылку, я хочу изменить изображение на «/img1_on.gif», затем сделать ajax-вызов веб-страницы и заменить значение между значением вернулся.

То же самое происходит при нажатии другого изображения, за исключением того, что изображение меняется на "/img2_on.gif" и переходит к другому URL.

Было бы проще, если бы я преобразовал в 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 был нажат тот, а не ссылки внутри div. Эта функция должна работать для вас, при условии, что вы заполните часть ajax.

Answer 2

Я не совсем уверен, что вы спрашиваете, но если вы хотите найти элемент, вызвавший событие click, вы можете использовать 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

Вы найдете этот пост , в котором точно объясняется, что такое порядок событий и что означает прослушивание события на этапе захвата или всплытия и когда отменить дальнейшее распространение события.

Answer 4

Например, выберите только подссылки ( это будет ссылкой):

$(".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
});