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

Answer 2

由于您在初始化之后将HTML插入到文档中，因此您需要使用jQuery live（）将事件绑定到新元素。

Answer 3

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

Answer 4

尝试：

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

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

4 个答案: