Счетчик символов jQuery внутри вновь созданной подсказки - PullRequest
Новая
       15

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

2 голосов
/ 04 мая 2010

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

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

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

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

Вот с чем я сейчас работаю: 

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>

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

РЕДАКТИРОВАТЬ: Вы также можете увидеть рабочий пример здесь: http://jsbin.com/ineja3/3

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

Ответы [ 2 ]

2 голосов
/ 05 мая 2010

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

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

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

1 голос
/ 05 мая 2010

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

$(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'});
            }
        }
    });
});
...