Marker Cluster click problem

Demo using spiderfyDistanceMultiplier to fix leaflet marker cluster click problem

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<body> 
<div id="map"></div>
</body>

CSS

#map { height: 400px; width: 100%}

JavaScript

var map = L.map('map').setView([58.0,16.0], 12); 
var myGeoJsonStyle = {
  		radius: 4,
   	    fillColor: "#b12325",
   	    color: "#b12325",
   	    weight: 1,
   	    opacity: 1,
   	    fillOpacity: 0			
};
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


var geoJsonData = {"type":"FeatureCollection","features":[{"type":"Feature","id":"Record 1","geometry":{"type":"Point","coordinates":[16.8822458,56.8011672]},"properties":{"recordId":"TEST POINT 1"}}
                                                     ,{"type":"Feature","id":"Record 2","geometry":{"type":"Point","coordinates":[16.8822458,56.8011672]},"properties":{"recordId":"TEST POINT 2"}}
]};

                   
var markerCluster = new L.markerClusterGroup(
    {spiderfyDistanceMultiplier:3}
);
var geoJsonLayer = L.geoJson(geoJsonData, {
    pointToLayer: function (feature, latlng){
	    return new L.circleMarker(latlng, myGeoJsonStyle);	  			    		    
	},
 	onEachFeature: function (feature, layer) { 
 	    layer.bindPopup(feature.properties.recordId);
        //markerCluster.addLayer(layer);
 	}
	});
markerCluster.addLayer(geoJsonLayer);
map.addLayer(markerCluster);