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

StackOverflow https://stackoverflow.com/questions/554817

  •  23-08-2019
  •  | 
  •  

Вопрос

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

<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) {
         // ??
};

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

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

Было бы проще, если бы я преобразовал в div и добавить CSS?

Нет правильного решения

Другие советы

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

Я не совсем понимаю, о чем вы спрашиваете, но если вы хотите найти элемент, вызвавший событие щелчка, вы можете использовать e.target, а затем $(e.target) оттуда.Что-то вроде этого. 

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top