Reading value of textbox inside a qtip not working in jQuery

Question

I am loading a jQuery qtip on hover (as it usually works). Inside this qtip, there is a textbox and a button. On the click of this button, I want to do something with the value of this textbox. Somehow, jQuery's .val() function returns me the initial value of the textbox. Where am I going wrong?

jQuery code:

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

HTML code for the popup qtip:

    <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>

Answer 1

I tried out your code and I think the problem might be the version of jQuery you are using. According to the qTip site you should be using jQuery 1.3.2. Your code works when you use the older version.

UPDATE:

The problem is that the call $("#button_in_the_qtip").click(...) is only affecting the button inside of the #popup div. The way qTip works is it actually creates a clone of the content div, and generates the html for the tooltip only when you hover over the target element. basically you need to add the click listener after the qTip is created.

To fix this move your button function inside of the qtip api callback 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
            });
        }

The only last step is to remove the #popup from the page, which you can do right in the qtip options

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

This is necessary because otherwise there would be duplicate elements on the page with the same ID, and jQuery doesn't like that.