$(selector).live('click', finction(){ }); acting as a double click, why?

Question

Hello, I've been trying to tackle this problem for a day and half now and I can't seem to figure out this strange behavior.

When I do that live.('click' fn) it behaves like a double click. Well no that's not the true, what happens is that if I click on it once it performs on action, then when I click on it again it files off the second action. Shouldn't a single click fire all the actions within the click function? And also tried the simple $.click(fn) but that didn't even work at all for a single click.

here is my code in quetion:

$('#details #map-home').live('click', function(){
    var name  = $('#dFname').text();
    ///////////////////////////////////////////////////////////////////
    ////////// Google Maps API Functions //////////////////////////////
    $(this).bind('cbox_complete', function(){
        var geocoder;
        var map;
        var a = $("span#address").text() + $("span#city").text() + $("span#state").text() + $("span#zip").text();
        //var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
        var div = 
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(37.0625, -95.677068);
        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
});

any ideas?

Answer 1

I don't think using live here makes sense as you are dealing with a unique element with an id so I changed it to click instead. Also moved the bind to cbox_complete out of your click function as this is probably in line with expected behaviour. Also removed some strange code. Try the below.

$("#map-home").bind('cbox_complete', function(){
    var geocoder;
    var map;
    var a = $("span#address").text() + $("span#city").text() + $("span#state").text() + $("span#zip").text();
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(37.0625, -95.677068);
    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,
                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);
        }
    });
});
$("#map-home").click(function(){
    $(this).colorbox({
        width:"650",
        inline: true,
        href:"#map",
        overlayClose: false
    });
});