Нажмите на div, но хотите, чтобы дочерние элементы реагировали на щелчок.
Вопрос
Мой дом выглядит так:
<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
});
Вы найдете это почта точно объясняя, каков порядок событий и что означает прослушивание события во время фазы захвата или барботирования и когда следует отменить дальнейшее распространение события.