Question

我正在尝试显示自定义bootstrap popover：

酥料饼：

<div id="popover-head" class="hide">Add new tab</div>
<div id="popover-content" class="hide">
     <form class="form-inline" id="pop-form" method="POST" action="../admin/FLT_add_tab.do">
          <div class="form-group">
             <!-- my form -->
             <input type="text" name="newTab" id="newTab" required="required" pattern="^[\S\s]{3,25}[A-z]+$" title="Only accept alphabet characters and length is minimum of 3 and max of 25 " placeholder="Tab name.."/>
             <button class="btn btn-primary" type="submit" ><i class="icon-white icon-ok"></i></button>
             <button class="btn" type="button" onClick="popRemove();" ><i class="icon-remove"></i></button>
          </div>
       <p></p>
       <p style="color:red" id="error-message"></p>
     </form>
</div>

我的div是从draggable到sortable的jQuery UI动态生成的，这是可排序的结构：

<div class="question-constructor multiple-choice-problem">
     <label for="textbox" class="question-label"> #. Edit this to define question: </label>
     <input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;"><label for="option-1-1">Thing 1</label>
     <input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;"><label for="option-1-2">Thing 1</label>
     <input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;"><label for="option-1-3">Thing 1</label>
     <input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;"><label for="option-1-4"> Thing 1</label>
</div>

但由于某种原因，弹出窗口没有显示：

$(function() {
    $(document).on('click', '#preview .question-constructor', function( event ) {

        var id =  $('#preview .question-constructor').index(this);

        $('#preview .question-constructor').each( function() {
            if( $('#preview .question-constructor').index(this) == id ) {
                $(this).popover('show');
                console.log('true' +$('#preview .question-constructor').index(this) );
            } else {
                console.log('not' +$('#preview .question-constructor').index(this) );
            }
        }); 

        event.preventDefault();
    });

    $('#preview .question-constructor').each( function() {
        $(this).popover({ 
            html : true,
            trigger : 'manual',
            title : function() {
                return $("#popover-head").html();
            },
            content: function() {
                return $("#popover-content").html();
            }
        });
    });
});

#preview id是可排序div的id，.question-constructor类是可以显示popover的sortable中的div。我的猜测是弹出窗口的初始化是错误的，但我无法正确使用它。

我想做的是：

点击项目（即项目1）时显示popover
但是当点击另一个项目（即项目2）时，隐藏所有其他弹出窗口并在此项目旁边显示弹出窗口。

更新：

这是fiddle，当我在onClick事件上进行初始化时，它显示了弹出窗口，但不是我想要的行为。

Answer 1

这有帮助吗？

http://jsfiddle.net/Rusln/AWF82/

…
$("#preview").on('click', '.question-constructor', function(e) {        
        e.preventDefault();
        $(".question-constructor").not(this).popover('hide');
    });
…

receive: function (ev, ui) {
            //init popover
            $(this).data().sortable.currentItem.popover({
                content: "hallo world"
            });
        }

Popover不会显示动态生成的div

1 个答案: