和Ajax调用后，Twitter的引导下拉按钮不起作用 [英] Twitter bootstrap dropdown button not working after and ajax call

问题描述

我已经包含在div标签下面的HTML。当点击该按钮，同级无序列表应该从Ajax调用返回的元素来填充。

综观Chrome开发人员工具控制台，列表项目被填充，但是当我点击它的下拉列表不会被触发。

下面是相关的HTML：

 ＆LT; D​​IV CLASS =BTN-组＆GT;＆LT;按钮式=按钮级=BTN BTN-默认下拉曲肘collat​​eralButton数据切换=下拉列表＆GT;＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT;＆LT; UL类=下拉菜单中选择角色=菜单＆GT;＆LT; / UL＆GT;＆LT; / DIV＆GT ;＆LT; D​​IV CLASS =旋转木马猫头鹰传送带＆GT;＆LT; / DIV＆GT;
 

下面是Ajax调用jQuery的事件处理程序：

 的$（document）。在（'点击'，'.collat​​eralButton'功能（E）{
        变量$此= $（本）;        VAR questionId = $('.collateralButton').parent('.btn-group').parent('.collateralWindow').siblings('.answerForm').find('.submissionForm').attr('data-questionid');        $阿贾克斯（{
            输入：GET，
            网址：'http://focusneedsassessmentservice.azurewebsites.net/api/needsassessment/'+ questionId +'/ additionalmedialist /'，
            成功：函数（additionalMediaList）{
                $。每个（additionalMediaList，功能（IDX，媒体）{
                    。$ this.siblings（'下拉菜单'）追加（＆LT;李类= \\collat​​eralItem \\数据内容= \\+ media.Data +\\＆GT;＆LT; A HREF = \\ ＃\\＆gt;中+ media.Name +＆下; / A＆GT;＆下; /利＆gt;中）;
                }）;
            }
        }）;
    }）;
 

解决方案

我把它放在一个小提琴没有你的Ajax调用，但仍注射按钮单击值，和它的作品。所以，无论是清楚你的Ajax调用与相应的数据回来，或者你没有注入到适当的位置...

简体小提琴的作品

 的$（document）。在（'点击'，'.collat​​eralButton'功能（E）{
        变量$此= $（本）;        VAR questionId = $('.collateralButton').parent('.btn-group').parent('.collateralWindow').siblings('.answerForm').find('.submissionForm').attr('data-questionid');        $（'下拉菜单'）追加（＆LT;李类= \\collat​​eralItem \\数据内容= \\等等等等\\＆GT;＆LT; A HREF = \\＃\\＆GT;等等等等＆LT; / A＆GT;＆LT; /李＆GT;）;
        $（'下拉菜单'）追加（＆LT;李类= \\collat​​eralItem \\数据内容= \\等等等等\\＆GT;＆LT; A HREF = \\＃\\＆GT;等等等等＆LT; / A＆GT;＆LT; /李＆GT;）;
}）;
 

我建议你失去 $ this.siblings（'下拉菜单中'） code像 $简单的东西（' .dropdown菜单'）现在（直到你得到它的工作），并把摆放在你的Ajax调用一些调试语句，因为当我想你的Ajax调用我从来没有得到一个成功的消息发回，可能是由于不具有有效的answerID GUID。

I have the following HTML contained in a div tag. When the button is clicked, the sibling unordered list should be populated with the elements returned from the ajax call.

Looking at the console in chrome developer tools, the list items are being populated, but the dropdown isn't triggered when I click on it.

Here is the relevant 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>

Here is the jQuery event handler with the ajax call:

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

解决方案

i put it in a fiddle WITHOUT your ajax call, but still injecting the values on button click, and it works. So clearly either your ajax call is not coming back with the appropriate data, or you're not injecting into the appropriate spot...

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

I would suggest losing your $this.siblings('.dropdown-menu') code for something simpler like $('.dropdown-menu') for now (until you get it working) and put in some debug statements around your ajax call, as when I tried your ajax call I never got a success message back, probably due to not having a valid answerID guid.

这篇关于和Ajax调用后，Twitter的引导下拉按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！