字符串和var串联，因为jquery选择器不起作用。 可能的原因是关闭

Question

I'm tweaking bootstrap-tabcollapse.js plugin . To the original method, in the js file, I've added bootstrap accordion listener show.bs.collapse to the panel:

   TabCollapse.prototype._createAccordionGroup = function(parentId, $heading){
        var tabSelector = $heading.attr('data-target'),
            active = $heading.data('bs.tabcollapse.parentLi').is('.active');

        if (!tabSelector) {
            tabSelector = $heading.attr('href');
            tabSelector = tabSelector && tabSelector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
        }

        var $tabPane = $(tabSelector),
            groupId = $tabPane.attr('id') + '-collapse',
            $panel = $(this.options.accordionTemplate($heading, groupId, parentId, active));
        $panel.find('.panel-heading > .panel-title').append(this._tabHeadingToPanelHeading($heading, groupId, parentId, active));
        $panel.find('.panel-body').append($tabPane.contents().detach())
            .data('bs.tabcollapse.tabpane', $tabPane);
     $("#"+groupId).on('show.bs.collapse', function () {
         console.log("show");
        });
        return $panel;
    };

Lines added:

 $("#"+groupId).on('show.bs.collapse', function () {
             console.log("show");
            });

I smell closure problem, but can't quite put my finger on it. So where is it?

Answer 1

The only reason why it isn't working might be because, the custom event isnt mapped to those elements or the event triggering is not happening correctly (actual reason not known).

But from looking at the code, comments and what you are trying to achieve(to my understanding), is, to do something when you are opening a accordion tab. So I think you can achieve that by using the API given, instead of tweaking it. A simple code would be like this :

$(document).on("shown.bs.collapse",".panel-collapse",function(e){
   $(".panel-heading").css({"background-color": ""});
   $(e.currentTarget).closest(".panel").find(".panel-heading").css({"background-color":"red"});
 });

Here is a fiddle : https://jsfiddle.net/t9pmq3sz/1/

Update:

I experimented with the tweak and managed to get it working somehow, instead of directly using the $("#"+groupId) , Im using it like this:

$(document).on("shown.bs.collapse","#"+groupId,function(e){
  console.log(e);
});

Fiddle : https://jsfiddle.net/t9pmq3sz/3/

Hope it helps