Twitter引导下拉按钮在和ajax调用之后不起作用答案

【问题标题】：Twitter bootstrap dropdown button not working after and ajax callTwitter引导下拉按钮在和ajax调用之后不起作用
【发布时间】：2014-02-02 22:25:27
【问题描述】：

我在 div 标记中包含以下 HTML。单击按钮时，应使用从 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>

这是带有 ajax 调用的 jQuery 事件处理程序：

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

【问题讨论】：

标签： jquery html asp.net ajax twitter-bootstrap

【解决方案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。

【讨论】：