Блог

Главная - Вопросы по программированию - DIV принадлежит элементу, откуда вы знаете?

DIV принадлежит элементу, откуда вы знаете?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть два div с некоторыми элементами в них (изображения, текст и т.д.), И мне нужно знать, какой div содержит элемент, на который был нажат. Например:

  • Если я нажму на любой элемент в div 1, затем перенаправлю на «pagina1.php «
  • Если я нажму на любой элемент в div 2, затем перенаправлю на «pagina2.php «

Как я могу это сделать в jquery?

Ответ №1:

Просто привяжите обработчики кликов к DIV (вашим оболочкам содержимого): 

 $( '#div1, #div2' ).click( function ( e ) {

    this // references the DIV inside which the click occured
    e.target // references the element that was clicked

});

Ответ №2:

Вы можете привязать событие щелчка ко всем элементам внутри вашего divs, вы можете узнать здесь, как это сделать http://api.jquery.com/click /, вы могли бы сделать что-то подобное для каждого div:

 $('div#1 > *').click(function(e) {
  //This will tell you the tagname of the element that was click.
  alert($(this).tagName);

  //this will redirect you to pagina1.php might not be the best choice
  window.location.replace('pagina1.php');
});

И вы должны сделать то же самое для div # 2.

Вы должны заметить, что селектор, который я создал, предназначен только для первых дочерних элементов элемента div.

Saludos.

Комментарии:

1. Привязка обработчиков щелчков ко всем дочерним элементам — это то, чего вы хотите избежать. Делегирование событий позволяет привязать только один обработчик щелчка к общему предку (в данном случае DIV)…

2. Я думаю, что ваше решение лучше, спасибо за совет, теперь я буду совершенствовать свои навыки с помощью jquery

Ответ №3:

 $('div.element-1 > *').click(function() { alert('first div childs') });

Ответ №4:

Я почти уверен $('').click , что это работает почти для всех элементов HTML (включая DIV). Это потому, что событие всплывает по цепочке родительских элементов. Итак, что-то вроде:

 <script>
$(document).ready(function()
{
$("#div1").click(function() { alert("something in div1 clicked"); }
$("#div2").click(function() { alert("something in div2 clicked"); }
$("#div3").click(function() { alert("something in div3 clicked"); }
}
</script>
</head>
<body>
<div id="div1"><table><tr><td><span>blah</span></td></tr></table><div>
<div id="div2"><span>blah2</span><div>
<div id="div3"><img src=""><div>