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调用没有带回适当的数据，或者你没有注入适当的位置......

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。

Twitter引导下拉按钮后无法工作和ajax调用

1 个答案: