0

I don't understand why this is happening, its really weird. Since i'm a Jquery novice I may missing something. here is my code

<script type="text/javascript">
$(document).ready(function(){
$(".photos_container > a").mouseover(function() {
  $(this).fadeTo("slow", 0.6);
 }).mouseout(function(){
  $(this).fadeTo("slow", 1);
});

$('.pagination a').on('click', function(e){  
e.preventDefault();  
var link = $(this).attr('href');  
$('.tab-pane.active').html('Loading...');
$('.tab-pane.active').load(link+' .tab-pane.active > *');
});
});
</script>

HTML

<div class="photos_container tab-pane active" id="1">
    <a href="javascript:void(0)" data-name="Chameleon Minds" data-photo-medium="http://localhost/site/wp-content/uploads/2013/04/Chameleon-medium.png" data-title="Art Projects for Kids - Status : Client work">
        <img class="thumb_image" src="http://localhost/site/wp-content/uploads/2013/04/Final.png">
    </a>
    <div class="pagination">
        <a class="page-numbers" href="">1</a>
        <span class="page-numbers current">2</span>
    </div>
</div>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
user1828313
  • 21
  • 4
  • possible duplicate of [Difference between jQuery \`click\`, \`bind\`, \`live\`, \`delegate\`, \`trigger\` and \`on\` functions (with an example)?](http://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-and-on) – Phil Apr 18 '13 at 01:36
  • Debug it in browser like in chrome right click and inspect element. then click your button and if there is any error it will show you in the box! – rach Apr 18 '13 at 01:40
  • I checked that and there is no error :( – user1828313 Apr 18 '13 at 01:46
  • what is the problem here? is the click event handler getting called? – Arun P Johny Apr 18 '13 at 03:18
  • is it working for the first time? also can you share the response – Arun P Johny Apr 18 '13 at 03:20
  • you can see the problem by yourself, check the link [link](http://cpuentes.com) – user1828313 Apr 18 '13 at 18:21

2 Answers2

1

Without seeing your HTML it's hard to say, but if .tab-pane.active contains .pagination a the element that the initial click/mouseover events are bound to will be clobbered. You can solve this problem using event delegation (bind to a containing element that does not get removed -- be as specific as you can).

$(document).on('click', ".pagination a", function (e) {
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
0
$('.pagination a').on('click', fun…

In that line you're binding an event handler directly to live DOM elements (all anchor tags inside element with the class pagination). Then inside of the event handler you overwrite part of the DOM with a call to jQuery's .load method.

$('.tab-pane.active').load(link…

The problem is that the part of the DOM that you overwrite contains the elements that you bound event listeners to.

The new content gets loaded into the '.tab-pane.active' area. So the elements that you bound the click handler to no longer exist. They have been removed and replaced with new content. Thus the click event handler is no longer bound to anything.

In order to fix the problem you need to use event delegation (there are many great articles about event delegation in javascript). Explosion Pills' answer was actually correct to recommend binding to the document with a selector to specific the elements you want to execute on.

$(document).on('click', ".pagination a", function (e) {
    e.preventDefault();  
    var link = $(this).attr('href');
    $('.tab-pane.active').html('Loading...');
    $('.tab-pane.active').load(link);
});

There is also another bug in your code.

$('.tab-pane.active').load(link+' .tab-pane.active > *');

The + operator is a string concatenation onto a url. I'm fairly sure that's a mistake.

wewals
  • 1,447
  • 9
  • 9