Javascript 在谷歌地图上调用Jquery accordion只运行一次

Javascript 在谷歌地图上调用Jquery accordion只运行一次,javascript,jquery,google-maps,jquery-ui-accordion,Javascript,Jquery,Google Maps,Jquery Ui Accordion,所以我创建了一个GoogleMaps页面,其中包含一组由XML生成的标记。其思想是,当您单击一个标记时,将生成一个div,显示与该标记相关的事件信息。这一切都很好,但我现在正在努力的是,试图将一个手风琴附加到事件信息上。到目前为止,我的代码将在您单击的第一个标记上显示一个手风琴,可以是任何一个,它返回正确的信息,显示div,并有一个手风琴,但在任何后续的标记单击上都没有,即使是第二次单击也没有相同的手风琴 我相信这一定是一个简单的修复,但我已经尝试了一些变体,在手风琴上有三次尝试,我留下来展示不

所以我创建了一个GoogleMaps页面,其中包含一组由XML生成的标记。其思想是,当您单击一个标记时,将生成一个div,显示与该标记相关的事件信息。这一切都很好,但我现在正在努力的是,试图将一个手风琴附加到事件信息上。到目前为止,我的代码将在您单击的第一个标记上显示一个手风琴,可以是任何一个,它返回正确的信息,显示div,并有一个手风琴,但在任何后续的标记单击上都没有,即使是第二次单击也没有相同的手风琴

我相信这一定是一个简单的修复,但我已经尝试了一些变体,在手风琴上有三次尝试,我留下来展示不同的版本,我得到了相同的结果

下面是将事件绑定到标记的代码,作为google事件侦听器

function bindEvents(marker, id, venueName, website){
google.maps.event.addListener(marker, 'click', function(){

    // TARGET and show eventsFeed on click
    $('#eventsFeed').show(222);
    var eventsList = document.getElementById('eventsList');


    // ADDS styles to the events feed divs when created
    // DECLARED here for the inclusion of the venueName & website as feedhead
    // even when no events are present
    var venueNameDiv = "<div class='venueNameFeed'>";
    var webSiteDiv = "<a target='_blank' class='websiteInFeed' href='http://"+website+"'><span class='fa fa-home'></span></a>";
    var titleInFeed = "<div class='"+id+" eventTitleFeed'>";
    var accordDataWrap = "<h2 class='accordWrap>";
    var eventInFeed = "<div class='eventDescFeed'>";
    var dateInFeed = '<div class="eventDateFeed">';
    var priceInFeed = "<div class='eventPriceFeed'>";
    // CLOSE the divs after each entry
    var divBrk = "</div>";
    var closeAccordDataWrap = "</h2>";
    var feedHead = venueNameDiv + venueName + divBrk;


    // EMPTY array to line up matched events in
    var eventsLine = [];

    // CYCLE through eventsArray
    for (var key in eventsArray){

        var eventLoop = eventsArray[key];

        // MATCH id to venue_id
        var venue_id = eventLoop.venue_id;
        if (venue_id == id){

            // ONLY show events from todays date onward
            var now = new Date();
            var date = new Date(eventLoop.eventDATE);
            // SET hours to 0 to ignore time part (always as 01:00:00 for event date?)
            now.setHours(0,0,0,0);  

            if (date >= now){

                //ADD all matched events to eventsLine array
                eventsLine.push(titleInFeed + eventLoop.eventTitle + divBrk + 
                    accordDataWrap + eventInFeed + eventLoop.event + divBrk + 
                    dateInFeed + formatDate(eventLoop.eventDATE) + divBrk +
                    priceInFeed + "£" + eventLoop.price + divBrk + closeAccordDataWrap);
            }
        }
    }

    // TURNS the array into a string and replaces those damned, infernal commas!!
    var outputString = eventsLine.toString().replace(/>,/g, '>');


    // PUT the compiled array into the eventsFeed div (with venueName as title)
    if (website==""){
        eventsList.innerHTML = feedHead + outputString;
    } else {
        eventsList.innerHTML = feedHead + webSiteDiv + outputString;
    }

    // ADD the accordion

   $(document).on('click', marker, function(){
       $(eventsList).accordion({
           header: "div."+id,
           icons: null
       })
   })
//或

accordion(eventsList, id);

});
}

第三个选项调用一个单独的函数,该函数定义为:

function accordion(placement,id){

$(placement).accordion({
    header: "div."+id,
    icons: null
});
}


正如你可能知道的那样,我对所有这些都很陌生,因此任何帮助或建议都将不胜感激

您能否替换此代码:

$(eventsList).each(function(){
    $(eventsList).accordion({
        header: "div."+id,
        icons: null
    });
});
$(eventsList).each(function(){
    $(this).accordion({
        header: "div."+id,
        icons: null
    });
});
使用此代码:

$(eventsList).each(function(){
    $(eventsList).accordion({
        header: "div."+id,
        icons: null
    });
});
$(eventsList).each(function(){
    $(this).accordion({
        header: "div."+id,
        icons: null
    });
});
试试看。另外,如果你能为你的代码做些修改,那会更好