Question

I have this HTML:

<div id="studyTestContent" class="studyTestItem">
    <input type="text" class="dropInput" size="15">
    <ul class="inputDrop" style="display:none;">
        <li class="dropDownItem">Si</li>
        <li class="dropDownItem">y</li>
        <li class="dropDownItem">con</li>
        <li class="dropDownItem">el</li>
    </ul>
</div>

and I have this jQuery:

$('.dropInput').click(function() {
    var offset = $(this).offset();
    var height = $(this).height();
    var width = $(this).width();
    var top = offset.top + height + "px";
    var right = offset.left + width + "px";

    $(this).next().show();

    $(this).next().css({
        'position': 'absolute',
        'right': right,
        'top': top
    });
});

With this function I am attempting to show the <ul> when the input is clicked. Nothing happens when I click it. Any ideas why?

Edit: I just figured out what the problem was, I am inserting the html after the page loads so I need to do:

$('.dropInput').live('click', function() {
    var offset = $(this).offset();
    var height = $(this).height();
    var width = $(this).width();
    var top = offset.top + height + "px";
    var right = offset.left + width + "px";

    $(this).next().show();

    $(this).next().css({
        'position': 'absolute',
        'right': right,
        'top': top
    });
});

Answer 1

Since you are inserting the HTML into the document after the initial, you will need to use jQuery live() to bind the event to the new element.