如何在 popover-bootstrap 中选择元素？答案

【问题标题】：How to select element within popover-bootstrap?如何在 popover-bootstrap 中选择元素？
【发布时间】：2013-07-24 18:35:58
【问题描述】：

首先，我是 jQuery 的新手。

当它通过弹出窗口引导程序调用时，我无法选择一个“选择”元素。我已经尝试过我遇到的任何可能的解决方案：在 div 标签中选择元素等。但没有任何效果。

这是我的小提琴http://jsfiddle.net/zMrmL/。

var test2 = $('#optionDropdown2');
var test = $('#popoverContent select.optionDropdown'); //I have no idea here

    $(test2).select2();
    $(test).select2();


    $(test).change(function() {
        var theID = $(test).select2('data').id;
        var theSelection = $(test).select2('data').text;
        $('#selectedID').text(theID);
        $('#selectedText').text(theSelection);
    });

    $(test2).change(function() {
        var theID2 = $(test2).select2('data').id;
        var theSelection2 = $(test2).select2('data').text;
        $('#selectedID2').text(theID2);
        $('#selectedText2').text(theSelection2);
    });

【问题讨论】：

标签： jquery twitter-bootstrap popover

【解决方案1】：

试试这个..

$(document).on('change','#optionDropdown',function(){
  var theID = $(this).val();
  var theSelection = $(this).children('option:selected').text();
  $('#selectedID').text(theID);
  $('#selectedText').text(theSelection);
})

http://jsfiddle.net/zMrmL/5/

【讨论】：

【解决方案2】：

在弹出框出现之前，弹出框内的选择框在 DOM 中不存在。

当你这样做时：

var test = $('#popoverContent select.optionDropdown')

选择元素还不存在。试着打印出测试变量，你就会明白我的意思了。解决方案是只有在popover存在后才检索元素。

【讨论】：

【解决方案3】：

确实，Robert 和 lashab 都向我指出了相同的问题，即在单击弹出框之前选择框永远不会存在。我把函数调用放在 popover 函数中，它就可以工作了。

这是新的小提琴...只是为了继续学习http://jsfiddle.net/zMrmL/7/

$(document).on('shown', "#btnPopover", function () {
$('select.optionDropdown').select2().change(function() {
var theID = $(this).select2('data').id;
    var theSelection = $(this).select2('data').text;
    $('#selectedID').text(theID);
    $('#selectedText').text(theSelection);
});
});

【讨论】：