Question

I’ve got a div that I want to enable a click function on, but not the “a” tags inside the div or the div it’s toggling:

HTML

 <div class='row client-outstandings'>
  <div class='twelve columns'>
    <div class='panel'>
      <h3><a href="{% url clients.views.view_client c.client.id %}" target="_blank">{{ c.client }}</a> - {{ c.total|currency }}</h3>
      <div class='client-outstandings-details' style='display:none;'><a href="">Blah blah</a> </div>
    </div>
  </div>
</div>

Code:

$(function () {

    $('.client-outstandings').live('click', function () {
        $(this).find('.client-outstandings-details').toggle('fade');
    });

});

I’m trying to make it so any “a” tags inside the “.client-oustandings” div or “.client-outstandings-details” do not trigger the toggle.

Any ideas?

Answer 1

live method is deprecated you can use on method instead:

$(document).on('click', '.client-outstandings', function () {

For preventing the event from bubbling, you can use stopPropagation method:

$('a').click(function(event) {
    event.stopPropagation()
})

Note that for delegating the event using on method, you should use a static parent element(which is better) or document object.