Twitter引导程序下拉按钮不工作后，阿贾克斯调用

Question

我有以下HTML标签中包含一个div标签。当按钮被点击时，兄弟无序列表应该填充从ajax调用返回的元素。

在chrome开发人员工具中查看控制台时，列表项目正在填充，但是在单击它时不会触发下拉列表。

下面是相关HTML：

<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle  collateralButton" data-toggle="dropdown">?<span class="caret"></span></button><ul class="dropdown-menu" role="menu"></ul></div><div class="carousel owl-carousel"></div> 

这里是jQuery的事件处理程序与Ajax调用：

$(document).on('click', '.collateralButton', function (e) { 
     var $this = $(this); 

     var questionId = $('.collateralButton').parent('.btn-group').parent('.collateralWindow').siblings('.answerForm').find('.submissionForm').attr('data-questionid'); 

     $.ajax({ 
      type: 'GET', 
      url: 'http://focusneedsassessmentservice.azurewebsites.net/api/needsassessment/' + questionId +'/additionalmedialist/', 
      success: function (additionalMediaList) { 
       $.each(additionalMediaList, function (idx, media) { 
        $this.siblings('.dropdown-menu').append("<li class=\"collateralItem\" data-content=\"" + media.Data + "\"><a href=\"#\">" + media.Name + "</a></li>"); 
       }); 
      } 
     }); 
    }); 

Answer 1

我把它放在一个小提琴没有你的Ajax调用，但仍然注入点击按钮上的值，它可以工作。所以很明显无论是你的Ajax调用没有相应的数据回来，或者你没有注入到适当的位置...

Simplified Fiddle that Works

$(document).on('click', '.collateralButton', function (e) { 
     var $this = $(this); 

     var questionId = $('.collateralButton').parent('.btn-group').parent('.collateralWindow').siblings('.answerForm').find('.submissionForm').attr('data-questionid'); 

     $('.dropdown-menu').append("<li class=\"collateralItem\" data-content=\"blah blah\"><a href=\"#\">blah blah</a></li>"); 
     $('.dropdown-menu').append("<li class=\"collateralItem\" data-content=\"blah blah\"><a href=\"#\">blah blah</a></li>");  
}); 

我建议失去你$this.siblings('.dropdown-menu')代码更简单的东西像$('.dropdown-menu')现在（直到你得到它的工作），并在你的ajax调用周围放入一些调试语句，因为当我尝试你的ajax调用时，我从来没有收到成功的消息，可能是由于没有有效的answerID guid。