動態div僅在第二次單擊后加載

Question

我在DOM中有一個可拖動的元素，當單擊它時，我想獲取x / y坐標（此示例中未顯示，但是為了將來）和淡入的工具提示的高度。工具提示是AJAX調用，長度可以可變。 我目前的問題是，僅在second單擊觸發元素時才會觸發shown.bs.tooltip事件。 碼：

        $('#click').draggable();
        $(document.body).on('click', function () {

            tooltipManager.title();
        });
        $('#click').on('shown.bs.tooltip', function () {
            console.log('from getHeight: ' + getHeight($('.tooltip')));
        });
        var tooltipManager = {
            title: function () {
                //ajax code to get title from database
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Service.asmx/GetDrugs",
                    dataType: "json",
                    success: function (data) {
                        //bootstrap uses the title attribute to set the html inside the tooltip
                        //here it's set to the results of the AJAX
                        var $tooltipData = prettyTooltip(data.d);
                        var offset = $('#click').offset();
                        var windowSize = [
                            width = $(window).width(),
                            height = $(window).height()
                        ]
                        //this fires on the first click
                        console.log(window.width);
                        console.log(offset.top);
                        $('#click').tooltip({
                            trigger: 'click',
                            html: true,
                            placement: tooltipManager.placement.setPlacement(data.d),
                            title: $tooltipData.html()
                            //it seems to me that it would be better design to call the tooltipManager
                            //setPlacement function, but since it's an async request, it fails
                        });
                        //if I add click() at the above line I get an infinite loop of AJAX calls

                    },
                    error: function (xhr) {
                        console.log('failed: ' + xhr.status);
                    }
                });
            },
            placement: {
                left: 'left',
                top: 'top',
                right: 'right',
                bottom: 'bottom',
                //if the value of getHeight is over a certain amount
                //I want to change the position of the tooltip
                setPlacement: function () {
                    var height = getHeight($('.tooltip'));
                    var place = '';
                    if (height < 150) {
                        place = 'right';
                    }
                    else {
                        place = 'left'
                    }
                    return place;
                }
            }
        }
        //not sure if this is good design to have this not a property of the tooltipManager object
        //this works currently for placing the tooltip in the correct position
        function prettyTooltip(data) {
            var $div = $('<div>');
            for (var i = 0; i < data.length; i++) {
                var $p = $('<p>').text(data[i]).appendTo($div);
            }
            return $div;
        }
        function getHeight(el) {
            return $(el).height();
        }

如果我使用one方法代替on並在代碼指示的位置添加click（），則工具提示會在第一次點擊時觸發，但是在一次點擊后無法獲得偏移量。 如何確保我保留所有當前功能，而無需單擊兩次即可顯示工具提示？

編輯： 小提琴

Answer 1

您只需單擊一次document.body即可啟動工具提示。 因此，在document.ready的底部只需添加一個click事件。 在第一次單擊之前啟動工具提示，然后在實際的#click進行第二次單擊以顯示工具提示。

看到這里： http : //jsfiddle.net/RxtBq/2/

我剛剛添加

$(document.body).click();

就在$(document).ready(function () {

編輯：

另外。 您可以擺脫：

$(document.body).on('click', function () {
            tooltipManager.title();
        });

只需調用tooltipManager.title(); 在document.ready函數的末尾。

http://jsfiddle.net/RxtBq/3/

最重要的部分是tooltipManager.title(); 在嘗試並單擊#click div之前被調用

Answer 2

我認為問題在於所有工具提示事件都以某種方式發生沖突。 如果您每次需要重新獲取工具提示內容，則一種方法是銷毀並重新初始化。

請注意，以下代碼還偵聽額外的單擊以隱藏工具提示。 （如果那不是您想要的，請告訴我）。

if ($('.tooltip:visible').length) { // destroy
  $('#click')
    .tooltip('destroy');
} else { // reinitialize
  $('#click')
    .tooltip('destroy')
    .tooltip({
      trigger: 'click',
      html: true,
      title: $tooltipData.html()})
    .tooltip('show');
}

更新的提琴： http : //jsfiddle.net/RxtBq/4/ 。

Answer 3

您可以在創建工具提示后放置.tooltip('show')

$('#click').tooltip({
                    trigger: 'click',
                    html: true,
                    title: $tooltipData.html()

                }).tooltip('show');

這是小提琴http://jsfiddle.net/g5mbn/