Question

我有一个通过ajax加载内容的页面。当我点击列表项时，它会通过ajax显示该项目的详细视图。在细节中，我有一个灯箱，如果点击链接就会打开。我正在使用Colorbox。

令我难以置信的是，如果我使用$（selector）.click（）它将无法工作，也不会使用$（selector）.bind（）。如果我使用jQuery的$（selector）.live（）功能，那么捕获点击并触发Colorbox的唯一方法就是。

但是通过使用它，我需要点击链接两次以激活颜色框。

这就是我所拥有的：

$('#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
            });

我一直试图看看是否可以在激活详细信息视图后加载此脚本然后我可以使用click（）或bind（）而不是live（）但是仍然无法使用我的方案或也许我只是不太了解这一点而且不知道这么简单。

Answer 1

在没有演示页面的情况下猜测确切问题有点困难，但您可以尝试使用此版本的代码：

$('#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

如果我已正确理解该方案，我会在您的代码中看到一些问题：

您正在另一个ID选择器“#map-work”的上下文中使用ID选择器“#deatils”。如果你的id是唯一的，那么你的id选择器不需要另一个上下文。
您在使用colorbox插件之前绑定了cbox_complete事件。理想情况下，它应该从colorbox插件的回调方法完成，以确保仅在使用colorbox插件后绑定事件。
其次，你应该使用.unbind（“cbox_complete”）。bind（“cbox_complete”，function（）{...}）
虽然这一点与您所面临的问题无关，但有助于更好地管理您的代码。尝试创建文字方法，然后将这些文字绑定到事件而不是匿名方法。

所以你的代码看起来像这样：

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

希望这会对你有所帮助。

感谢
Pranav Kaushik
pranavkaushik.wordpress.com

试图使用$（selector）.live（）但似乎是双击

2 个答案: