2

我很难弄清楚这一点。我试图让用户打开一个工具提示（使用 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 元素（隐藏）。但它没有应用于工具提示。

4

2 回答 2

2

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

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

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

于 2010-05-05T00:06:13.800 回答
1

另一种选择（可以说是比添加额外的点击事件更简洁的.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'});
            }
        }
    });
});
于 2010-05-05T00:24:39.247 回答