Twitter Bootstrap下拉按鈕在Ajax調用后不起作用

Question

我在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>");
                });
            }
        });
    });

Answer 1

我把它放在沒有您的ajax調用的小提琴中，但是仍然在單擊按鈕時注入值，並且它可以工作。 因此很明顯，您的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');

        $('.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')丟失$this.siblings('.dropdown-menu')代碼，使之像$('.dropdown-menu')這樣簡單（直到您可以正常使用），然后在ajax調用周圍放入一些調試語句，因為當我嘗試您的Ajax呼叫時，我再也沒有收到成功消息，這可能是由於沒有有效的answerID guid。