Question

I have a page that loads content via ajax. When I click on a list item it shows a detail view of that item via ajax. In the details i have a lightbox that opens up if a link is clicked. I’m using Colorbox for that.

What boggles me is that if I use $(selector).click() it won’t work, nor the $(selector).bind() either. The only way a click can be captured and trigger the Colorbox is if I use the $(selector).live() feature of jQuery.

But by using it, I need to click on the link twice to get the colorbox to activate.

This is what I have:

$('#details #map-work').live('click', function(){
                var name  = $('#dFname').text();
                ///////////////////////////////////////////////////////////////////
                ////////// Google Maps API Functions //////////////////////////////
                $(this).bind('cbox_complete', function(){
                    var geocoder;
                    var map;
                    var a = $("span#co_address").text() + $("span#co_city").text() + $("span#co_state").text() + $("span#co_zip").text();
                    //var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
                    geocoder = new google.maps.Geocoder();
                    var latlng = new google.maps.LatLng(-34.397, 150.644);
                    var myOptions = {
                        zoom: 19,
                        center: latlng,
                        disableDefaultUI: true,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    }
                    map = new google.maps.Map(document.getElementById("map"), myOptions);

                    geocoder.geocode( { 'address': a}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var infowindow = new google.maps.InfoWindow({
                                content: a
                            });
                            var marker = new google.maps.Marker({
                                map: map,
                                //draggable: true,
                                //icon: image,
                                position: results[0].geometry.location
                            });
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.open(map, this);
                            });
                            infowindow.open(map, marker);
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }
                    });
                });
                ///////////////////////////////////////////////////////////////////
                $(this).colorbox({width:"650", inline:true, href:"#map", overlayClose: false});
                //$('#colorbox').draggable();
                return false
            });

I have been trying to see if I can load this script once the detail view is activated maybe then I can use the click() or bind() instead of live() but that still doesn’t work with my scenario or perhaps I just don’t understand this very well and don’t know something this simple.

Answer 1

It’s a bit difficult to guess the exact problem without a demo page, but you could try this version of your code:

$('#details #map-work')
  .live('cbox_complete', function(){
                    var geocoder;
                    var map;
                    var a = $("span#co_address").text() + $("span#co_city").text() + $("span#co_state").text() + $("span#co_zip").text();
                    //var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
                    geocoder = new google.maps.Geocoder();
                    var latlng = new google.maps.LatLng(-34.397, 150.644);
                    var myOptions = {
                        zoom: 19,
                        center: latlng,
                        disableDefaultUI: true,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    }
                    map = new google.maps.Map(document.getElementById("map"), myOptions);

                    geocoder.geocode( { 'address': a}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var infowindow = new google.maps.InfoWindow({
                                content: a
                            });
                            var marker = new google.maps.Marker({
                                map: map,
                                //draggable: true,
                                //icon: image,
                                position: results[0].geometry.location
                            });
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.open(map, this);
                            });
                            infowindow.open(map, marker);
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }
                    });
                }
  )
  .live('click', function(){
                ///////////////////////////////////////////////////////////////////
                ////////// Google Maps API Functions //////////////////////////////
                ///////////////////////////////////////////////////////////////////
                $(this).colorbox({width:"650", inline:true, open: true, href:"#map", overlayClose: false});
                //$('#colorbox').draggable();
                return false
            });