Why does this jQuery click event not work?

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

It works on jsFiddle; there must be something wrong somewhere else in the page. — configurator
– configurator, Commented Jun 14, 2011 at 18:27
Is the click event not firing or is there an issue with what supposed to execute upon firing? — Gabe
– Gabe, Commented Jun 14, 2011 at 18:28
Are you executing that JavaScript in a document ready handler? — Matt Ball
– Matt Ball, Commented Jun 14, 2011 at 18:28
Yes, that would change things. The event is never bound to the new HTML. Use jQuery live() to bind the event to the new HTML. — George Cummins
– George Cummins, Commented Jun 14, 2011 at 18:32

Phil · Accepted Answer · 2011-06-14 18:28:37Z

3

Make sure you wait until the document is ready with

$(document).ready(function() {
    // put all your jQuery goodness in here.
    $('.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
        });
    });
});

answered Jun 14, 2011 at 18:28

Phil

4,2244 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

George Cummins · Accepted Answer · 2011-06-14 18:33:14Z

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.

answered Jun 14, 2011 at 18:33

George Cummins

29k8 gold badges74 silver badges91 bronze badges

1 Comment

PhillipKregg Over a year ago

For future reference, live() is now deprecated. Use on() instead: api.jquery.com/on

Bryan A · Accepted Answer · 2011-06-14 18:26:44Z

0

$(this).next(":hidden").show();

answered Jun 14, 2011 at 18:26

Bryan A

3,6341 gold badge26 silver badges29 bronze badges

Comments

Shef · Accepted Answer · 2011-06-14 18:30:38Z

0

Try:

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

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

answered Jun 14, 2011 at 18:30

Shef

45.6k15 gold badges82 silver badges91 bronze badges

Collectives™ on Stack Overflow

Why does this jQuery click event not work?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related