Переключение при нажатии на всплывающую подсказку из динамического HTML

Question

Переключение при нажатии на всплывающую подсказку из динамического HTML

0

Я пытаюсь получить всплывающую подсказку, чтобы открыть или закрыть (переключить), когда вы нажимаете.

HTML генерируется динамически из javascript, но вот пример одного из элементов, который я хочу иметь всплывающую подсказку при нажатии:

<label class="passiveText smallText" title="Name: Smith, John , Occupation Code: BA81, Occupation 
Description: BUSINESS SYSTEMS M" rel="tooltip" style="margin-top:10px; width:80%; text-decoration:underline; 
color:#009245;" containeridx="0" id="lblBadge_7022_0">7022</label>

На странице показано, что я пытаюсь добавить следующий код, поэтому при нажатии

    $(document).on("pageshow", "#DailyFrm", function () {
        $('[id*="lblBadge"]').on('click', function (e) {
            $(this).tooltip('open');
        });
    }

Это даже не вскрытие всплывающей подсказки. Что я делаю не так?

David Tunnell 20 фев. 2014, в 20:33

Источник

0

Это мобильный jQuery? 'pageshow' не является допустимым событием для настольного компьютера jQuery
Rob M. 20 фев. 2014, в 19:36
0

Извините, да, это мобильный телефон jQuery. Я обновлю тег
David Tunnell 20 фев. 2014, в 19:36
0

Вы используете какой-либо плагин всплывающей подсказки или хотите реализовать это самостоятельно?
terales 20 фев. 2014, в 19:37
0

Вы пробовали поменять click tap ?
Rob M. 20 фев. 2014, в 19:38
0

Я не использую никаких дополнительных плагинов. Просто jQuery, jQueryUI, jQuery Mobile.
David Tunnell 20 фев. 2014, в 19:38
0

Переключение клика для нажатия не имело никакого эффекта.
David Tunnell 20 фев. 2014, в 19:42
0

id^= попробуйте .. ^ начинается с "lblBadge".
Omar 20 фев. 2014, в 19:43
0

Ну, кажется, элемент не выделен (используя * или ^). Изменения CSS тоже не работают.
David Tunnell 20 фев. 2014, в 19:51
0

Тогда ваш код JS не загружен. Вы используете одностраничную или многостраничную модель? Где вы размещаете код JS?
Omar 20 фев. 2014, в 19:54
0

Одностраничная модель ... и этот код находится в том же файле, который правильно генерирует приведенный выше HTML ...
David Tunnell 20 фев. 2014, в 19:56
0

Поместите этот код внутри страницы div, он должен работать.
Omar 20 фев. 2014, в 20:03

Показать ещё 9 комментариев

Теги:

javascript

jquery

jquery-mobile

1 ответ

Ещё вопросы

Это мобильный jQuery? 'pageshow' не является допустимым событием для настольного компьютера jQuery
Извините, да, это мобильный телефон jQuery. Я обновлю тег
Вы используете какой-либо плагин всплывающей подсказки или хотите реализовать это самостоятельно?
Я не использую никаких дополнительных плагинов. Просто jQuery, jQueryUI, jQuery Mobile.
Переключение клика для нажатия не имело никакого эффекта.
id^= попробуйте .. ^ начинается с "lblBadge".
Ну, кажется, элемент не выделен (используя * или ^). Изменения CSS тоже не работают.
Тогда ваш код JS не загружен. Вы используете одностраничную или многостраничную модель? Где вы размещаете код JS?
Одностраничная модель ... и этот код находится в том же файле, который правильно генерирует приведенный выше HTML ...
Поместите этот код внутри страницы div, он должен работать.

terales · Accepted Answer · 2014-02-20T17-51-00.000Z

отредактированный

Стильная реализация всплывающей подсказки (jsfiddle) для вашего html:

$('[id*="lblBadge"]').on('click', function (e) {
    var $this = $(this);
    var $tooltip = $this.children('.tooltip');

    if ($tooltip.length > 0) {
        $tooltip.remove();

        return true;
    } 

    $tooltip = $('<div>');
    $tooltip.addClass('tooltip');
    $tooltip.text( $this.attr('title') );

    $this.append($tooltip);
});

И стили:

label { // choose appropriate selector
    position: relative; // required for positioning
    overflow: visible; // required for guaranteed tooltip visibility
}

.tooltip {
    position: absolute; // required for positioning

    // Relative to the parent label
    top: 35px;
    left: 20px;

    // Not necessary but recommended for the good look
    width: 250px;

    // optional
    background: lightgray;
    color: black;
}

Я рекомендую использовать красивое решение, предоставленное Osvaldas Valutis: http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

Проверьте демо-версию с мобильного.