1

我正在尝试显示自定义引导弹出框：

弹出框：

<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 是从 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();
            }
        });
    });
});

#previewid 是可排序 div 的 id，class.question-constructor是可排序内的 div，popover 应该在其中显示。我的猜测是弹出框的初始化是错误的，但我做错了。

我想做的是：

  1. 单击项目（即项目 1）时显示弹出框
  2. 但是，当单击另一个项目（即项目 2）时，隐藏所有其他弹出框并在该项目旁边显示弹出框。

更新：

当我将初始化放在 onClick 事件上时，这是一个小提琴，它显示了弹出窗口但不是我想要的行为。

4

1 回答 1

0

这有帮助吗？

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"
            });
        }
于 2013-11-09T14:34:16.243 回答