Сделать весь блок DIV кликабельным

Question

У меня есть сценарий на моем сайте, и с помощью jQuery он делает элемент, который можно использовать для кликабельности variation-valuediv.

К сожалению, области с p & div теги не могут быть изменены. Есть ли легкое решение для этого?

jsfiddle пример :::http://jsfiddle.net/xb4qkdLu/ :::

<div class="variation-value"> 
    <p class="left" style="background:green">left aligned text</p> 
    <div class="right" style="background:red">right aligned text</div> 
    <p></p> 
</div> 

Answer 1

Что я вижу в jsfiddle вы публикуемую после этого, является то, что вы привязки нажмите на элемент td в классе variation ($('.variation').on('click', 'td', function(event){...).

Основываясь на том, что вы написали, и комментариях, которые я оставил под вашим первоначальным сообщением, подключение к триггеру слушателя для класса .variation-value' решит это для вас (так как в настоящее время у вас нет привязанных к нему событий).

Если вы хотели бы дополнить Вас оригинальный сценарий, вы должны либо пойти вокруг с некоторыми CSS «взломать», добавив к CSS из p и span в тд следующее pointer-events:none; (потребует некоторых дополнительных IE штраф -tuning), или вы также можете добавить другие элементы в пределах td к триггер-слушателю.

Пример кода:

CSS-бы как (с учетом нормального случая браузер):

.variation-value > p, .variation-value > div { pointer-events:none; } 

Jquery будет:

$('.variation-value').on('click', function(event){ ... } 

Имейте в виду, что ваш left элемент привязан для сброса списка значений, если он виден (не обнаружено никакого триггера, установленного для элемента right). Если вы активируете эффект кликов для всех элементов в вашем .variation-values, вы теряете эффект сброса, связанный с левым элементом. Это то, чего вы хотите достичь? Если это так, просто перейдите к приведенному выше фрагменту CSS, и у вас будет все, что вам нужно.

Также только отметить, в вашем HTML-разметке, вы помещаете элементы в следующей иерархии:

div.variation-value 
    p[left] 
     div[right] 

Вы не закрываете свой p элемента перед добавлением в div для правого элемента, который он становится дочерним лицом p. Я предполагаю, что вы должны были закрыть тег p, чтобы обеспечить функциональность по назначению.

Answer 2

http://jsfiddle.net/hasecbinusr/pctgs5ke/

$(document).ready(function(e) { 
    $('.variation-value').click(function() { 
    alert('You clicked it!'); 
    }); 
});