qTip2

Contents of my qtips are disappearing

HTML

<script src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css">
        <div id="addLookup" style="display: none;">
            <div class="innerTip">
                <input type="textbox" class="lookup"/>
                <button class='poster'>go</button>
            </div>
        </div>
<p><a class="taQtip" href="#">1</a></p>
<p><a class="taQtip" href="#">2</a></p>

CSS

/* Add some nice box-shadow-ness to the modal tooltip */
#ui-tooltip-modal{
    max-width: 420px;

    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
    box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
}

#ui-tooltip-modal .ui-tooltip-content{
    padding: 10px;
}

JavaScript

$(document).ready(function() {

    $('a.taQtip').qtip({
        show: {
            event: 'click' // Show it on click...
        },
        hide: false,

        content: {
            text: $('#addLookup').html(),
            title: {
                text: 'Add Value',
                button: true
            }
        }
    })


    $(document).on("click", ".poster", function() {
        $(this).parent().hide();
        $(this).parent().after('<div>loading...</div>');
        $.ajax({
            url: '/echo/json/',
            data: {
                delay: '5',
                lookup: $(this).parent().find('.lookup').val()
            },
            context: this,
            success: function(e) {
                $('a.taQtip').qtip('hide');
                $('.innerTip').show();
                $('.innerTip').next().remove();

            }
        });
    });

});