Счетчик символов jQuery внутри вновь созданной всплывающей подсказки

Мне трудно понять это. Я пытаюсь, чтобы пользователь открыл всплывающую подсказку (используя jQuery qTip). Это создает «новый» элемент всплывающей подсказки на странице; он берет его из существующего скрытого HTML-элемента div на веб-странице.

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

Сценарий «Счетчик символов максимальной длины» можно найти здесь.

Однако часть «счетчика» не работает внутри вновь созданной всплывающей подсказки. Любые идеи, как я могу привязать этот счетчик символов максимальной длины к всплывающей подсказке?

Вот с чем я работаю до сих пор:

load_qtip(apply_qtip_to) {
    $(apply_qtip_to).each(function() {
        $(this).qtip({
            content: $(".tooltip-contents"), //this is a DIV in the HTML
            show: 'click',
            hide: 'unfocus'
        });
    });
}

$(document).ready(function() {
    load_qtip(".tooltip");
    $('.my_textbox').maxlength({
        'feedback': '.my_counter'
    });
});

А вот как в основном выглядит HTML (помните, однако, что весь этот div «реплицирован» в новую всплывающую подсказку):

<div class="tooltip_contents">
    <form>
        <div class="my_counter" id="counter">55</div>
        <textarea class="my_textbox" maxlength="55" id="textbox"></textarea>
        <input type="button" value="Submit">
    </form>
</div>

Любое направление/предложения по этому поводу было бы здорово, так как я полностью потерян. Большое спасибо!

EDIT: Вы также можете увидеть рабочий пример здесь: http://jsbin.com/ineja3/3

Счетчик символов работает с исходным элементом DOM (который скрыт). Но это не применяется к всплывающей подсказке.


jquery bind counter tooltip
person Dodinas    schedule 04.05.2010    source источник
comment
Не могли бы вы опубликовать демо или поделиться тем, что у вас есть? Нам нужно знать, где и как отображается эта реплицированная всплывающая подсказка. Как это удалить? Как вы взаимодействуете с плагином счетчика максимальной длины символов?   -  person Mottie    schedule 04.05.2010
comment
Привет фаджи, спасибо за ответ. Вы можете увидеть рабочий пример здесь: jsbin.com/ineja3/3 Любая помощь будет здоровой!   -  person Dodinas    schedule 05.05.2010

Ответы (2)


arrow_upward
2
arrow_downward

У меня это сработало, когда я изменил обработчик qTip, чтобы он выглядел примерно так:

$(".tooltip").live('click', function(e) { 
    e.preventDefault();
    $('.text_area').maxlength({
       'feedback' : '.counter'
    });
});

Я предполагаю, что это потому, что вам нужно позволить qTip создать динамическую текстовую область, прежде чем применять maxlength. Это связано с тем, что селектор $('.text_area') не найдет вашу текстовую область, пока она не существует, поэтому он не может прикрепить к ней код обратной связи. Я не уверен, каковы последствия запуска функции maxlength каждый раз, когда кто-то щелкает ссылку всплывающей подсказки, но вы должны иметь возможность настроить ее на запуск только один раз, используя логический флаг или что-то в этом роде.

person patrickmcgraw    schedule 05.05.2010
comment
Спасибо, Патрик. Это было то, что я искал, получилось! - person Dodinas; 05.05.2010

arrow_upward
1
arrow_downward

Другая альтернатива (и, возможно, более чистый способ сделать это, чем добавление дополнительного события клика в .tooltip) состоит в использовании функций обратного вызова, встроенных в API qTip (в частности onShow). Поэтому измените код инициализации на:

$(apply_qtip_to).each(function() {
    $(this).qtip({
        content: $(".tooltip-contents"), //this is a DIV in the HTML
        show: 'click',
        hide: 'unfocus',
        api: {
            onShow: function() {
                $('.text_area').maxlength({ 'feedback' : '.counter'});
            }
        }
    });
});
person Alconja    schedule 05.05.2010
comment
Спасибо Alconja. Я не знал об API. - person Dodinas; 05.05.2010