我如何在.Append語句Jquery中使用錨標記

Question

我陷入了需要在附加的<li>附加錨標簽鏈接的情況，但是我不知道如何開始

這是我的代碼：

   var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    function codeAddress() {
        infoBubble = new InfoBubble({
            map: map,
            shadowStyle: 0,
            padding: 10,
            borderRadius: 10,
            arrowSize: 15,
            maxWidth: 300,
            borderWidth: 1,
            borderColor: '#ccc',
            arrowPosition: 50,
            arrowStyle: 0
        });
        $.getJSON('/Dashboard/LoadWorkerList', function (address) {
            $.each(address, function () {
                var currVal = this["AddressLine1"];
                var Name = this["Name"];
                var Gender = this["Gender"];
                var Bdate = this["Birthdate"];
                var ID = this["Worker_ID"];
                geocoder.geocode({ 'address': currVal }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: iconBase + 'man.png',
                            position: results[0].geometry.location,
                            title: currVal

                        })

                        $('#places').append($('<li>')
                                .text(currVal)
                                .data('location', results[0].geometry.location));

                        google.maps.event.addListener(map, 'bounds_changed', function () {
                            $('#places li').css('display', function () {
                                return (map.getBounds().contains($(this).data('location')))
                      ? ''
                      : 'none';
                            });
                        });
                        function myclick(i) {
                            google.maps.event.trigger(address[i], "click");
                        }

                        //mgr = new MarkerManager(map);


                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infoBubble.removeTab(0);
                                infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                                infoBubble.open(map, marker);
                            }
                        })(marker, currVal));
                        address.push(marker);

                    }
                    else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                        setTimeout(codeAddress, 2000);
                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            });
            google.maps.event.trigger(map, 'bounds_changed');
        });
    }

但是我嘗試更改此方法但不起作用

$('#places').append($('<li>')
    .wrap('<a href="javascript:myclick(' + (address.length - 1) + ')">' + location + '</a><br>')
    .data('location', results[0].geometry.location));

它沒有顯示在列表中。 。 提前致謝！

Answer 1

不確定要實現的目標，但是內聯事件處理程序不是可行的方法

也許你應該嘗試

var j =i;
var link = $('<a href="#">linkTextHere</a>')
            .data('location', results[0].geometry.location);    
$('#places').append($('<li/>').append(link));
link.on('click', function(event){
                     event.preventDefault();
                     google.maps.event.trigger(address[j], "click");
                  }
);

代替 ：

$('#places').append($('<li>')
    .wrap('<a href="javascript:myclick(' + (address.length - 1) + ')">' + location + '</a><br>')
    .data('location', results[0].geometry.location));