javascript - 为什么这个 jQuery 点击事件不起作用？

Question

我有这个 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>

我有这个 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
    });
});

通过这个函数，我试图显示 <ul>单击输入时。单击它时没有任何反应。有什么想法吗？

编辑:我刚刚弄清楚问题出在哪里，我在页面加载后插入 html，所以我需要这样做:

$('.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

确保你等到文档准备好

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