Click Event Only Fires Once

JavaScript
1

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);
	});
});
2

Your scripting code seems to be affecting all elements on the page with a class of first.