Question

我已经在这里找到了一些关于这个主题的问题，但没有一个问题解决了我的问题。我做可以创建下拉列表，它甚至会下降。如果我再次单击该按钮或单击其外部，它就不会消失。所以我认为有些事件没有正确连接，但我无法弄清楚哪个。

这是我的JS代码的简化版本，它只需要一个ID为<div>的容器outer。

var container = $('<div>').addClass('dropdown').appendTo($('#outer'));

// simulate test entry
var entry = {
  id: 1
};

var id = 'btn-action-' + entry.id;

$('<button>')
  .addClass('btn btn-primary dropdown-toggle')
  .data('toggle', 'dropdown')
  .attr({
    'type': 'button',
    'id': id,
    'aria-haspopup': 'true',
    'aria-expanded': 'false'
  })
  .text('Actions')
  .appendTo(container);

var listContainer = $('<div>').addClass('dropdown-menu').attr('aria-labelledby', id).appendTo(container);

var actionName = 'Delete';
$('<a>')
  .addClass('dropdown-item')
  .attr('href', '#')
  .click({ 'action': actionName.toLowerCase(), 'entry': entry }, function (e) {
    alert('Invoking ' + e.data.action + ' for entry ' + e.data.entry.id);
    e.preventDefault();
  })
  .text(actionName)
  .appendTo(listContainer);

// this is only necessary because of dynamic creation:
$('.dropdown-toggle').dropdown();

这是fiddle showing my issue。

Answer 1

参考＆＃34; jQuery data attr not setting＆＃34; .data(key, value)仅在内部设置数据值，但不在元素上设置。

Bootstrap正在尝试查找所有元素$("[data-toggle='dropdown']")，但无法找到您的元素。要解决此问题，只需将'data-toggle': 'dropdown'添加到您的属性列表中：

$('<button>')
  .addClass('btn btn-primary dropdown-toggle')
  .attr({
    'type': 'button',
    'id': id,
    'data-toggle': 'dropdown',
    'aria-haspopup': 'true',
    'aria-expanded': 'false'
  })
  .text('Actions')
  .appendTo(container);

动态创建的Bootstrap下拉列表无法正常工作

1 个答案: