Question

我正在为用户创建指南，应用程序会提示他们执行特定操作。

因此，例如，当点击特定的单选按钮时，会出现一个弹出窗口，指示他们接下来要选择哪个元素。

HTML：

<label>
    <input type="radio" name="venue_id[]" id="radio_venue_586" value="586" role="button" data-toggle="popover" /> ABC
</label>

jQuery的：

$("[id^='radio_venue_" + venueID + "']").popover({
    placement: "top",
    title: "Board & Occupancy",
    content: "Please choose a board & occupancy for this venue",
    container: ".venue-1-" + venueID
});

我尝试过各种不同类型的活动，到目前为止还没有。

是的，venueID在用户点击单选按钮时传递一个值。

$('input[name="venue_id[]"]').click(function(event) {
    venueID = $(this).attr("value");

    // alert() works
    alert(venueID);

    // none of the following triggers
    $('[id^="radio_venue_"]').popover({
        placement: "top",
        title: "Board & Occupancy",
        content: "Please choose a board & occupancy for this venue",
        container: ".venue-1-" + venueID
    });

    $("[id^='radio_venue_" + venueID + "']").popover({
        container: ".venue-1-" + venueID
    });

});

是否可以通过单选按钮触发弹出窗口？

Answer 1

Popover似乎在单选按钮上工作正常。只需确保container元素存在。

＆＃13;

var venueID = 5;

$('[id^="radio_venue_"]').popover({
    placement: "top",
    title: "Board & Occupancy",
    content: "Please choose a board & occupancy for this venue",
    container: ".venue-1-" + venueID
});


$("[id^='radio_venue_" + venueID + "']").popover({
    container: ".venue-1-" + venueID
});

＆＃13;

label {
  margin-left: 50px;
  margin-top: 120px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<label>
  <input type="radio" name="venue_id[]" id="radio_venue_586" value="586" role="button" />ABC
</label>

<div class="venue-1-5"></div>

＆＃13;

Answer 2

参见此工作演示：http://www.bootply.com/dxB6Rasx5m

$("[data-toggle=popover]").popover({
    placement: "top",
    title: "Board & Occupancy",
    content: "Please choose a board & occupancy for this venue",
    trigger: "click"
});

检查浏览器控制台中的错误，并确保定义了venueID。此外，如果输入未被其他内容下推，则top展示位置可能会出现问题。

Answer 3

尝试在单选按钮上设置更改事件。如果选中单选按钮的值（由：checked CSS3伪类完成），则手动触发弹出窗口。

Bootstrap提供show / hide / toogle / destroy方法作为字符串参数。

 $("[id^='radio_venue_" + venueID + "']").change(
    function(){
        if ($(this).is(':checked') ) {
            $(this).popover('show');
        }
    });

Bootstrap：使用单选按钮触发弹出窗口

3 个答案: