trying to use $(selector).live() but seems to act as a double click

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

Answer 2

Hi

If I have understood the scenario correctly, I see few problems in your code:

1. You are using an ID selector “#deatils” in context of another ID selector “#map-work”. If your ids are unique then your id selector do not need another context.

2. You are binding the cbox_complete event before consuming the colorbox plugin. Ideally it should be done from the callback method of the colorbox plug-in to ensure that the event is binded only after the colorbox plugin is consumed.

3. Secondly, you should be using .unbind(“cbox_complete”).bind(“cbox_complete”, function(){…})

4. Though this point is not related to the issue that you are facing, yet is something that will help manage your code better. Try to create literal methods and then bind those literals to events instead of anonymous methods.

So your code looks something like this:

var localVariables={

currentSelectedNode:null
}

var functions={

bindDetailView:function(){

    $(“#details”).live(“click”, functions.conumeColorBox);

},
conumeColorBox:function(){
    localVariables.currentSelectedNode=$(this);
    $(this).colorbox({
        //your colorbox options
        }, functions.onColorBoxConsumed);
},
onColorBoxConsumed:function(){
    if(localVariables.currentSelectedNode){
    localVariables.currentSelectedNode.unbind(“cbox_complete”).bind(“cbox_complete” functions.onColorBoxCompleted);
        }
},
onColorBoxCompleted:function(){
    //your whole code for google maps that need to be called on cbox_complete event
}
}

Hope this helps you.

Thanks
Pranav Kaushik
pranavkaushik.wordpress.com