新创建的工具提示内的 jQuery 字符计数器

Question

我很难弄清楚这个问题。我试图让用户打开工具提示（使用 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>

对此的任何方向/建议都很棒，因为我完全了解丢失的。非常感谢！

编辑：您也可以在这里看到一个工作示例：http://jsbin.com /ineja3/3

字符计数器作用于原始 DOM 元素（隐藏）。但它没有应用于工具提示。

Answer 1

当我将 qTip 实时处理程序更改为如下所示时，它对我有用：

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

我猜这是因为您需要让 qTip 在应用 maxlength 之前创建动态文本区域。这是因为 $('.text_area') 选择器在文本区域存在之前不会找到它，因此它无法将反馈代码附加到其中。我不确定每次有人单击工具提示链接时运行 maxlength 函数的含义是什么，但您应该能够使用布尔标志或其他东西将其设置为仅运行一次。

Answer 2

另一种替代方案（可以说是比向 .tooltip 添加额外的点击事件 更简洁的方法）是使用 qTip API 中内置的回调函数 (特别是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'});
            }
        }
    });
});