0

我在悬停时加载一个 jQuery qtip（因为它通常有效）。在这个 qtip 里面，有一个文本框和一个按钮。点击这个按钮，我想用这个文本框的值做一些事情。不知何故，jQuery 的 .val() 函数返回了文本框的初始值。我哪里错了？

jQuery代码：

$(function() {
    $("#someplace").qtip({
        content: $("#popup"),
        hide: {
            fixed: true
        },
        position: {
            corner: {
                tooltip: 'topMiddle',
                target: 'bottomMiddle'
            },
            adjust: { 
                x:-30,
                y:-75
            }
        },
        style: {
        width:'100px',
            color:'white',
            name:'tspopup'
        }
    });

    $("#button_in_the_qtip").click(
        function () {
            var txt = $("#textbox_in_the_qtip").val();
            alert($("#textbox_in_the_qtip").attr('id')); // This returns "textbox_in_the_qtip"
            alert(txt); // This returns "abc" <---- Problem
        }
    );
});

弹出 qtip 的 HTML 代码：

    <div style="display:none;" id="popup">
        <table cellpadding="5px" border="1" style="margin-top:12px; margin-bottom:12px; color:#fff; font-size:.7em;">
            <tr>
                <td>
                    <input type="text" id="textbox_in_the_qtip" value="abc" />
                </td>
                <td>
                    <button id="button_in_the_qtip">Add</button>
                </td>
            </tr>
        </table>
    </div>
4

1 回答 1

1

我尝试了您的代码，我认为问题可能出在您使用的 jQuery 版本上。根据 qTip 站点，您应该使用 jQuery 1.3.2。当您使用旧版本时，您的代码可以工作。

更新：

问题是调用$("#button_in_the_qtip").click(...)只影响#popup div 内的按钮。qTip 的工作方式实际上是创建内容 div 的克隆，并且仅当您将鼠标悬停在目标元素上时才会为工具提示生成 html。基本上你需要在创建 qTip 之后添加点击监听器。

要解决此问题，请在 qtip api 回调 onContentUpdate 中移动您的按钮功能

api: {
        onContentUpdate: function(){
            $("#button_in_the_qtip").click(function () {
                var txt = $("#textbox_in_the_qtip").val();
                alert($("#textbox_in_the_qtip").attr('id')); // This returns "textbox_in_the_qtip"
                alert(txt); // This returns "abc" <---- Problem
            });
        }

唯一的最后一步是从页面中删除#popup，您可以在 qtip 选项中直接执行此操作

content: $("#popup").remove(),

这是必要的，因为否则页面上会有相同 ID 的重复元素，而 jQuery 不喜欢这样。

于 2010-06-23T19:56:35.577 回答