Jquery Hover effect with clickable element inside the main clickable element

Question

I have a div which is has a clickable event.

<div id="economy" class="service-block" title="Economy" data-price="79.09">
  <h3>Economy </h3>
  <span class="service-price">R79.09</span>
  <div class="selected-service"></div>
  <div class="service-info" title="economy">?</div>
</div>

It also has a hover effect

$(function () {
    $('.service-block').hover(

    function () {
        $(this).animate({
            backgroundColor: '#258dd4'
        }, 250);
        var tron = $(this).attr('id');
        $('#' + tron + ' .service-info').show(50);
        $('#' + tron + ' h3').css('color', '#303030');
    },

    function () {
        $(this).animate({
            backgroundColor: 'rgba(37, 140, 212,0.2)',
        }, 250);
        var tron = $(this).attr('id');
        $('.service-info').hide(50);
        $('#' + tron + ' h3').css('color', '#fff');
    });
});

The hover effect displays .service-info which is a small "?" div block. I want that element too also have a clickable event. however when I click on the "?" div block it acts on the main div click event and the "?" div block click event.

I have tried various options but taking the .service-info div outside of the main div but then i get terrible UX. I have tried that with hover() ,mouseenter(), mouseenter(), mouseout() but it does not work so well, not something I can put into production.

Any suggestions?

Thanks.

Answer 1

Maybe stopPropagation may help:

$(function() {

    $('#foo').click(function(event) {

        alert('Red');
    });

    $('#foo > div').click(function(event) {

        event.stopPropagation();

        alert('Blue');
    });

});

http://jsfiddle.net/coma/zmahz/

Answer 2

我认为您可以对“？”使用超链接而不是div块，并使用其click事件：

Answer 3

I would wrap the "?" inside the div with an tag, then assign an onclick event to this tag. This should avoid collisions.

Consider:

<div id="economy" class="service-block" title="Economy" data-price="79.09">
<h3>Economy </h3>
<span class="service-price">R79.09</span>
<div class="selected-service"></div>
<div class="service-info" title="economy"><a href='#' onclick='function()'>?</a></div>
</div>
<script type='text/javascript'>
function()
{
// do something
}
</script>