0

OK so I have an element that is normally loaded no ajax, but then on click it reloads (along with other content) via ajax. no I cannot make the click elements non-ajax loaded on click.

Everything is working fine except I am doing the following on the .live click event: 

$('.product-sort a.type-a').removeClass('active');
$(this).addClass('active');

Now the first time it works fine. but then the by the second/third time depending on the element I click, it doesn't just remove type-a it also removes the active class from type-b elements... I did console.log($('.product-sort a.type-a')) and after ajax some of the elements are loading twice. Is the solution to just simply ajax load the nav to begin with so there isn't a predom/postdom elements? or is there another way around this?

Jubair
  • 2,557
  • 2
  • 26
  • 25
  • Check this related question about events binding on dynamically created elements : http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – sdespont Feb 13 '13 at 08:18
  • 2
    Just a side note. The `live` function was deprecated since version 1.7 and is removed in version 1.9. http://api.jquery.com/live/ --- Just so you know you run into trouble when you upgrade to the latest jQuery version. – w00 Feb 13 '13 at 08:19

1 Answers1

1

Are you applying the correct classes to the reloaded DOM elements, because the selector should not be failing if you are. It is possible that you apply .type-a class to anchors that should be .type-b or you're applying both classes.

Also one suggestion, live() is deprecated in jQuery 1.7 and removed in 1.9, use on() instead.

Konstantin Dinev
  • 30,746
  • 13
  • 64
  • 91
  • I really should refresh my knowledge base with these changes... thanks for the heads up, I'll take a look at moving over to 1.9 and seeing if that fixes the issue. and yea for some reason, it still targets the other elements.. I use different data-type="type_1" for targeting, it's really an odd one.. – Jubair Feb 17 '13 at 04:30