Click Event Only Fires Once

[unemployment]

I am integrating the google maps api into my application on the map it has an info window that will display information about a marker / cluster in that location. My problem is that when the map loads, the $('next') click event will only fire once. Once I close the info window and open another info window the $('next') click event won't fire. I find this to be odd because both times I am creating and destroying the next link element. What am I doing wrong?

 

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var html2 = '';
  
html2 += '<div id="infoWin">';
html2 += '<ul class="addrlist">';

for (var i=0; i < markers.length; i++){
	if(i > 0){
		html2 += '<li style="display: none;">' + markers[i].html + '</li>';
	}else{
		html2 += '<li class="first">' + markers[i].html + '</li>';
	}

}

html2 += '</ul>';
html2 += '<div style="position: relative; bottom: 0;"><a id="next" class="f_right pts" href="javascript: void(0)">Next</a></div>';
html2 += '</div>';

infowindow.setContent(html2);
infowindow.open(map, markers[0]);

$('#infoWin').parent().css({overflow: 'hidden'});

$('ul.addrlist li').click(function() {
	var p = $(this).find("a").attr("rel");
	return infopop(markers[p]);
}); 

$('#next').click(function() {
	console.log('test');
	var toHighlight = $('.first').next().length > 0 ? $('.first').next() : $('#infoWin li').first();
	$(this).fadeOut(100);
	$('.first').fadeOut(100);
	$('.first').delay(100).removeClass('first');
	toHighlight.delay(100).addClass('first');
	$('.first').delay(100).fadeIn(100);
	$(this).delay(100).fadeIn(100);
});
}); 

[Adam]

That's because the click event is only bound to the existing #next element. When you regenerate the HTML it's a brand new element, just with the same ID. Look into the live() method (or on() if you're using jQuery 1.7) that will bind the event to any current or future element(s) matching the selector.

[unemployment]

That's because the click event is only bound to the existing #next element. When you regenerate the HTML it's a brand new element, just with the same ID. Look into the live() method (or on() if you're using jQuery 1.7) that will bind the event to any current or future element(s) matching the selector.

 

I upgrade to version 1.7 but the .on() doesn't seem to work.  I tried using the .live() but the event kept bubbling and flashing on my screen like crazy.

 

Here is the code I tried:

 

$("#next").on("click", function(){

var toHighlight = $('.first').next().length > 0 ? $('.first').next() : $('#infoWin li').first();

$(this).fadeOut(100);

$('.first').fadeOut(100);

$('.first').delay(100).removeClass('first');

toHighlight.delay(100).addClass('first');

$('.first').delay(100).fadeIn(100);

$(this).delay(100).fadeIn(100);

});

 

Any other thoughts?

 

[Adam]

Do you have this somewhere publicly accessible, or a runnable piece of code to illustrate the problem? Can't see anything exactly wrong with it, but it's very difficult to visualise what's happening.

[unemployment]

If I can't figure it out I'll post in this thread with a public link.

[unemployment]

Adam,

 

I created a public link where you can see what is going on http://pitchbig.com/people2.php 

 

Click on a cluster in the map and then click the next button in the info window.  You'll see that if you open the window twice the 'next' event won't fire.  If you view my people2.js file you'll see the $(#next).on  about half way down the page.  This still doesn't work and I'm not sure what to do. Please help.

[unemployment]

I realized that I needed to use delegated events but I now have event bubbling. If I open the window 3 times and click the next button respectively, on the forth time when I click the next button the next event will fire four times. How do I stop this?

 

                                 $("#google_map_canvas").on("click", "#next", function() {	
				var toHighlight = $('.first').next().length > 0 ? $('.first').next() : $('#infoWin li').first();
				$(this).fadeOut(100);
				$('.first').fadeOut(100);
				$('.first').delay(100).removeClass('first');
				toHighlight.delay(100).addClass('first');
				$('.first').delay(100).fadeIn(100);
				$(this).delay(100).fadeIn(100);
			}); 

[kevinblevins]

Here is the code I tried:

 

$("#next").on("click", function(){

  var toHighlight = $('.first').next().length > 0 ? $('.first').next() : $('#infoWin li').first();

  $(this).fadeOut(100);

  $('.first').fadeOut(100);

  $('.first').delay(100).removeClass('first');

  toHighlight.delay(100).addClass('first');

  $('.first').delay(100).fadeIn(100);

  $(this).delay(100).fadeIn(100);

});

[kevinblevins]

Here is the code I tried:

 

$("#next").on("click", function(){

  var toHighlight = $('.first').next().length > 0 ? $('.first').next() : $('#infoWin li').first();

  $(this).fadeOut(100);

  $('.first').fadeOut(100);

  $('.first').delay(100).removeClass('first');

  toHighlight.delay(100).addClass('first');

  $('.first').delay(100).fadeIn(100);

  $(this).delay(100).fadeIn(100);

});